<template>
  <div class="common-layout">
    <!-- 页面加载效果 -->
    <transition name="fade">
      <div v-if="pageLoading" class="page-loading-overlay">
        <div class="loading-content">
          <el-icon class="loading-icon is-loading"><Loading /></el-icon>
          <p class="loading-text">加载中...</p>
        </div>
      </div>
    </transition>
    
    <!-- 点击菜单外部区域收缩菜单的遮罩层 -->
    <div v-if="!isMenuCollapsed" class="menu-overlay" @click="toggleMenu">
    </div>
    <el-container>
      <el-header class="header">
        <div class="header-content">
          <div class="header-left">
            <div class="menu-toggle" @click="toggleMenu">
              <el-icon>
                <Expand v-if="isMenuCollapsed" />
                <Fold v-else />
              </el-icon>
            </div>
            <div class="logo">
              <el-icon class="logo-icon"><Reading /></el-icon>
              <span>个人学习系统</span>
            </div>
          </div>
          <!-- 搜索框 -->
          <div class="header-search" v-if="isLoggedIn && shouldShowSearchBar">
            <el-autocomplete
              ref="autocompleteRef"
              v-model="searchKeyword"
              :fetch-suggestions="querySearchAsync"
              placeholder="搜索积累内容标题"
              :trigger-on-focus="true"
              clearable
              @select="handleSearchSelect"
              @keyup.enter="handleSearchEnter"
              popper-class="search-autocomplete-popper"
              style="width: 500px;"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
              <template #append>
                <div class="search-buttons">
                  <el-button @click="handleSearchEnter" :icon="Search">搜索</el-button>
                  <el-button @click="goToAIAssistant" type="primary" :icon="ChatDotRound" class="ai-search-btn">AI搜索</el-button>
                </div>
              </template>
              <template #default="{ item }">
                <!-- 双列标题行 -->
                <div v-if="item.isHeaderRow" class="search-header-row">
                  <div class="search-header-left">
                    <span>搜索历史</span>
                    <el-button 
                      v-if="searchHistory.length > 0" 
                      size="small" 
                      text 
                      type="info"
                      @click.stop="clearSearchHistory"
                    >
                      清空
                    </el-button>
                  </div>
                  <div class="search-header-right">
                    <span>搜索发现</span>
                  </div>
                </div>
                <!-- 单列标题（只有热门搜索） -->
                <div v-else-if="item.isHeader" class="search-header-single">
                  <span>{{ item.title }}</span>
                </div>
                <!-- 内容行 -->
                <div v-else-if="item.isRow" class="search-content-row">
                  <div class="search-column-left" @click.stop="item.historyItem && handleHistoryClick(item.historyItem.keyword, item.historyItem.data)">
                    <div v-if="item.historyItem" class="search-item-wrapper">
                      <div class="search-item-text">{{ item.historyItem.keyword }}</div>
                    </div>
                  </div>
                  <div class="search-column-right" @click.stop="item.hotItem && handleHotClick(item.hotItem)">
                    <div v-if="item.hotItem" class="search-item-wrapper">
                      <div class="search-item-text">{{ item.hotItem.title }}</div>
                      <el-icon class="hot-icon"><Star /></el-icon>
                    </div>
                  </div>
                </div>
                <!-- 普通搜索结果项 -->
                <div v-else class="search-item" :class="{ 'search-item-simple': !item.icon }">
                  <el-icon v-if="item.icon" class="search-item-icon">
                    <component :is="item.icon" />
                  </el-icon>
                  <div class="search-item-content">
                    <div class="search-item-title">{{ item.title || item.value }}</div>
                    <div v-if="item.typeName" class="search-item-type">{{ item.typeName }}</div>
                  </div>
                </div>
              </template>
            </el-autocomplete>
          </div>
          <!-- 创建内容按钮 -->
          <div class="header-actions" v-if="isLoggedIn">
            <el-button type="primary" :icon="Edit" @click="showCreateDialog = true">
              创建内容
            </el-button>
          </div>
          
          <div class="user-info">
            <span>欢迎， {{ userName }} </span>
            <el-dropdown trigger="click" @command="handleUserAction">
              <div class="user-avatar-container" :class="{ 'not-logged-in': !isLoggedIn }">
                <el-avatar :size="40" :src="userAvatar" fit="cover">
                  <span v-if="isLoggedIn">{{ userName.charAt(0).toUpperCase() }}</span>
                  <el-icon v-else><User /></el-icon>
                </el-avatar>
                <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="admin" v-if="isLoggedIn">
                    <el-icon><Setting /></el-icon>
                    <span>后台管理</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="login" v-if="!isLoggedIn">
                    <el-icon><Key /></el-icon>
                    <span>登录</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="logout" v-if="isLoggedIn" divided>
                    <el-icon><SwitchButton /></el-icon>
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container class="main-container">
        <el-aside :width="isMenuCollapsed ? '64px' : '240px'" class="aside"
          :class="{ 'mobile-aside': isMobile, 'collapsed': isMenuCollapsed }">
          <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isMenuCollapsed"
            :collapse-transition="false" :default-openeds="[]" @select="handleSelect">
            <!-- 首页菜单项 -->
            <el-menu-item index="home">
              <el-icon><HomeFilled /></el-icon>
              <span>首页</span>
            </el-menu-item>
            
            <el-sub-menu index="practice-module">
              <template #title>
                <el-icon>
                  <Reading />
                </el-icon>
                <span>练习模块</span>
              </template>
              <el-menu-item index="new-politics-practice">
                <el-icon><Flag /></el-icon>
                <span>时政练习</span>
              </el-menu-item>
              <el-menu-item index="new-common-sense-practice">
                <el-icon><Compass /></el-icon>
                <span>常识练习</span>
              </el-menu-item>
              <el-menu-item index="new-language-practice">
                <el-icon><ChatDotRound /></el-icon>
                <span>言语练习</span>
              </el-menu-item>
              <el-menu-item index="new-quantity-practice">
                <el-icon><DataAnalysis /></el-icon>
                <span>数量练习</span>
              </el-menu-item>
              <el-menu-item index="new-judgment-practice">
                <el-icon><Finished /></el-icon>
                <span>判断练习</span>
              </el-menu-item>
              <el-menu-item index="new-data-analysis-practice">
                <el-icon><TrendCharts /></el-icon>
                <span>资料练习</span>
              </el-menu-item>
              <el-menu-item index="new-vocabulary-accumulation-practice">
                <el-icon><CollectionTag /></el-icon>
                <span>词语积累</span>
              </el-menu-item>
            </el-sub-menu>
            
            <!-- 试卷测验菜单项 -->
            <el-menu-item index="paper-test" @click="goToModule('paper-test')">
              <el-icon><Document /></el-icon>
              <span>试卷测验</span>
            </el-menu-item>
            
            <el-menu-item index="practice-settings-wrongQuestions" @click="goToModule('practice-settings-wrongQuestions')">
              <el-icon><Setting /></el-icon>
              <span>错题本练习</span>
            </el-menu-item>
            
            <!-- AI聊天助手菜单项 -->
            <el-menu-item index="ai-chat-assistant">
              <el-icon><ChatDotRound /></el-icon>
              <span>AI聊天助手</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="main-content">
          <!-- 首页布局：左中右三块结构 -->
          <div v-if="activeIndex === 'home'" class="home-layout">
              <!-- 左侧区域 - 积累内容分类列表 -->
              <div class="home-left-panel">
                <div class="panel-card">
                  <h3>
                    <el-icon><Collection /></el-icon>
                    积累内容
                  </h3>
                  <div class="home-accumulation-menu">
                    <!-- 常识积累 -->
                    <div class="accumulation-menu-category">
                      <div class="category-header" @click="toggleCategory('common-sense')">
                        <el-icon><Compass /></el-icon>
                        <span>常识积累</span>
                        <el-icon class="expand-icon" :class="{ expanded: expandedCategories.includes('common-sense') }">
                          <ArrowRight />
                        </el-icon>
                      </div>
                      <div v-show="expandedCategories.includes('common-sense')" class="category-items">
                        <div 
                          v-for="item in commonSenseAccumulations.slice(0, 5)" 
                          :key="'left-cs-' + item.id"
                          class="menu-item"
                          :class="{ active: selectedHomeItem?.id === item.id && selectedHomeCategory === 'common-sense' }"
                          @click="selectHomeItem(item, 'common-sense')"
                        >
                          <el-icon><Document /></el-icon>
                          <span class="item-name">{{ item.title }}</span>
                        </div>
                        <div v-if="commonSenseAccumulations.length === 0" class="empty-hint">暂无内容</div>
                      </div>
                    </div>
                    
                    <!-- 时政积累 -->
                    <div class="accumulation-menu-category">
                      <div class="category-header" @click="toggleCategory('politics')">
                        <el-icon><Flag /></el-icon>
                        <span>时政积累</span>
                        <el-icon class="expand-icon" :class="{ expanded: expandedCategories.includes('politics') }">
                          <ArrowRight />
                        </el-icon>
                      </div>
                      <div v-show="expandedCategories.includes('politics')" class="category-items">
                        <div 
                          v-for="item in politicsAccumulations.slice(0, 5)" 
                          :key="'left-pol-' + item.id"
                          class="menu-item"
                          :class="{ active: selectedHomeItem?.id === item.id && selectedHomeCategory === 'politics' }"
                          @click="selectHomeItem(item, 'politics')"
                        >
                          <el-icon><Document /></el-icon>
                          <span class="item-name">{{ item.title }}</span>
                        </div>
                        <div v-if="politicsAccumulations.length === 0" class="empty-hint">暂无内容</div>
                      </div>
                    </div>
                    
                    <!-- 作文素材 -->
                    <div class="accumulation-menu-category">
                      <div class="category-header" @click="toggleCategory('essay-material')">
                        <el-icon><Edit /></el-icon>
                        <span>作文素材</span>
                        <el-icon class="expand-icon" :class="{ expanded: expandedCategories.includes('essay-material') }">
                          <ArrowRight />
                        </el-icon>
                      </div>
                      <div v-show="expandedCategories.includes('essay-material')" class="category-items">
                        <div 
                          v-for="item in essayMaterials.slice(0, 5)" 
                          :key="'left-essay-' + item.id"
                          class="menu-item"
                          :class="{ active: selectedHomeItem?.id === item.id && selectedHomeCategory === 'essay-material' }"
                          @click="selectHomeItem(item, 'essay-material')"
                        >
                          <el-icon><Document /></el-icon>
                          <span class="item-name">{{ item.title }}</span>
                        </div>
                        <div v-if="essayMaterials.length === 0" class="empty-hint">暂无内容</div>
                      </div>
                    </div>
                    
                    <!-- 我的笔记 -->
                    <div class="accumulation-menu-category">
                      <div class="category-header" @click="toggleCategory('note')">
                        <el-icon><Notebook /></el-icon>
                        <span>我的笔记</span>
                        <el-icon class="expand-icon" :class="{ expanded: expandedCategories.includes('note') }">
                          <ArrowRight />
                        </el-icon>
                      </div>
                      <div v-show="expandedCategories.includes('note')" class="category-items">
                        <div 
                          v-for="item in notes.slice(0, 5)" 
                          :key="'left-note-' + item.id"
                          class="menu-item"
                          :class="{ active: selectedHomeItem?.id === item.id && selectedHomeCategory === 'note' }"
                          @click="selectHomeItem(item, 'note')"
                        >
                          <el-icon><Document /></el-icon>
                          <span class="item-name">{{ item.title }}</span>
                        </div>
                        <div v-if="notes.length === 0" class="empty-hint">暂无内容</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 中间区域 - 显示选中的积累内容列表 -->
              <div class="home-center-panel">
                <div class="panel-card home-center-card">
                  <div v-if="selectedHomeCategory" class="selected-category-list">
                    <!-- 词语积累详情 -->
                    <div v-if="selectedHomeCategory === 'vocabulary' && selectedVocabulary" class="vocabulary-detail">
                      <div class="vocabulary-detail-header">
                        <h2 class="vocabulary-detail-word">{{ selectedVocabulary.word }}</h2>
                        <el-tag v-if="selectedVocabulary.partOfSpeech" type="info" class="vocabulary-detail-pos">
                          {{ selectedVocabulary.partOfSpeech }}
                        </el-tag>
                      </div>
                      
                      <div class="vocabulary-detail-content">
                        <div class="vocabulary-section" v-if="selectedVocabulary.definition">
                          <h4><el-icon><Document /></el-icon> 释义</h4>
                          <p class="definition-text">{{ selectedVocabulary.definition }}</p>
                        </div>
                        
                        <div class="vocabulary-section" v-if="selectedVocabulary.examples">
                          <h4><el-icon><ChatDotRound /></el-icon> 例句</h4>
                          <p class="example-text">{{ selectedVocabulary.examples }}</p>
                        </div>
                        
                        <div class="vocabulary-section" v-if="selectedVocabulary.synonyms">
                          <h4><el-icon><Link /></el-icon> 近义词</h4>
                          <p class="related-text">{{ selectedVocabulary.synonyms }}</p>
                        </div>
                        
                        <div class="vocabulary-section" v-if="selectedVocabulary.antonyms">
                          <h4><el-icon><SwitchButton /></el-icon> 反义词</h4>
                          <p class="related-text">{{ selectedVocabulary.antonyms }}</p>
                        </div>
                      </div>
                    </div>
                    
                    <div v-else-if="selectedHomeCategory === 'vocabulary'" class="empty-detail">
                      <el-icon class="empty-icon"><CollectionTag /></el-icon>
                      <p>请从右侧选择词语查看详情</p>
                    </div>
                    
                    <div class="category-list-header" v-if="selectedHomeCategory !== 'vocabulary'">
                      <h3>{{ getCategoryLabel(selectedHomeCategory) }}</h3>
                    </div>
                    
                    <!-- 常识积累列表 -->
                    <div v-if="selectedHomeCategory === 'common-sense'" class="accumulation-items-list">
                      <div 
                        v-for="item in commonSenseAccumulations" 
                        :key="'center-cs-' + item.id"
                        :id="`center-common-sense-${item.id}`"
                        class="note-list-item"
                        :class="{ 'item-highlight': selectedHomeItem?.id === item.id }"
                        @click="viewCommonSenseDetail(item)"
                      >
                        <div class="note-item-content">
                          <div class="note-title">
                            <el-icon class="note-icon"><Compass /></el-icon>
                            {{ item.title }}
                          </div>
                          <div class="note-time">
                            <el-icon><Clock /></el-icon>
                            <span>{{ item.createTime }}</span>
                          </div>
                        </div>
                        <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                      </div>
                      <el-empty v-if="commonSenseAccumulations.length === 0" description="暂无常识积累内容" />
                    </div>
                    
                    <!-- 时政积累列表 -->
                    <div v-else-if="selectedHomeCategory === 'politics'" class="accumulation-items-list">
                      <div 
                        v-for="item in politicsAccumulations" 
                        :key="'center-pol-' + item.id"
                        :id="`center-politics-${item.id}`"
                        class="note-list-item"
                        :class="{ 'item-highlight': selectedHomeItem?.id === item.id }"
                        @click="viewPoliticsDetail(item)"
                      >
                        <div class="note-item-content">
                          <div class="note-title">
                            <el-icon class="note-icon"><Flag /></el-icon>
                            {{ item.title }}
                          </div>
                          <div class="note-time">
                            <el-icon><Clock /></el-icon>
                            <span>{{ item.createTime }}</span>
                          </div>
                        </div>
                        <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                      </div>
                      <el-empty v-if="politicsAccumulations.length === 0" description="暂无时政积累内容" />
                    </div>
                    
                    <!-- 作文素材列表 -->
                    <div v-else-if="selectedHomeCategory === 'essay-material'" class="accumulation-items-list">
                      <div 
                        v-for="item in essayMaterials" 
                        :key="'center-essay-' + item.id"
                        :id="`center-essay-material-${item.id}`"
                        class="note-list-item"
                        :class="{ 'item-highlight': selectedHomeItem?.id === item.id }"
                        @click="viewEssayDetail(item)"
                      >
                        <div class="note-item-content">
                          <div class="note-title">
                            <el-icon class="note-icon"><Edit /></el-icon>
                            {{ item.title }}
                          </div>
                          <div class="note-time">
                            <el-icon><Clock /></el-icon>
                            <span>{{ item.createTime }}</span>
                          </div>
                        </div>
                        <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                      </div>
                      <el-empty v-if="essayMaterials.length === 0" description="暂无作文素材内容" />
                    </div>
                    
                    <!-- 我的笔记列表 -->
                    <div v-else-if="selectedHomeCategory === 'note'" class="accumulation-items-list">
                      <div 
                        v-for="item in notes" 
                        :key="'center-note-' + item.id"
                        :id="`center-note-${item.id}`"
                        class="note-list-item"
                        :class="{ 'item-highlight': selectedHomeItem?.id === item.id }"
                        @click="viewNoteDetail(item)"
                      >
                        <div class="note-item-content">
                          <div class="note-title">
                            <el-icon class="note-icon"><Notebook /></el-icon>
                            {{ item.title }}
                          </div>
                          <div class="note-time">
                            <el-icon><Clock /></el-icon>
                            <span>{{ item.createdTime || item.updatedTime }}</span>
                          </div>
                        </div>
                        <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                      </div>
                      <el-empty v-if="notes.length === 0" description="暂无笔记内容" />
                    </div>
                  </div>
                  <div v-else class="empty-detail">
                    <el-icon class="empty-icon"><FolderOpened /></el-icon>
                    <p>请从左侧选择分类查看积累内容</p>
                  </div>
                </div>
              </div>
              
              <!-- 右侧区域 -->
              <div class="home-right-panel">
                <div class="panel-card">
                  <div class="vocabulary-header">
                    <h3>
                      <el-icon><CollectionTag /></el-icon>
                      词语积累
                    </h3>
                    <div class="vocabulary-count">共 {{ allVocabularyList.length }} 个</div>
                  </div>
                  <div class="vocabulary-list">
                    <div 
                      v-for="item in allVocabularyList" 
                      :key="'right-vocab-' + item.id"
                      class="vocabulary-item"
                      :class="{ 'active': selectedVocabulary?.id === item.id }"
                      @click="selectVocabulary(item)"
                    >
                      <div class="vocabulary-word">{{ item.word }}</div>
                      <div class="vocabulary-pos" v-if="item.partOfSpeech">{{ item.partOfSpeech }}</div>
                    </div>
                    <el-empty v-if="allVocabularyList.length === 0" description="暂无词语积累" :image-size="80" />
                  </div>
                </div>
              </div>
            </div>
          
          <!-- 子路由视图，用于显示练习设置页面等 -->
          <router-view v-else></router-view>
        </el-main>
      
      <!-- 移动端底部导航栏 -->
      <div class="mobile-bottom-nav" v-show="isMobile">
        <div class="nav-item" :class="{ active: activeIndex === '/' }" @click="goToHome">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </div>
        <div class="nav-item" :class="{ active: activeIndex.includes('practice') }" @click="togglePracticeMenu">
          <el-icon><Reading /></el-icon>
          <span>练习</span>
        </div>
        <div class="nav-item" :class="{ active: activeIndex === '/wrong-questions' }" @click="router.push('/wrong-questions')">
          <el-icon><Warning /></el-icon>
          <span>错题本</span>
        </div>
        <div class="nav-item" :class="{ active: activeIndex === '/note' }" @click="router.push('/study-system/note')">
          <el-icon><Document /></el-icon>
          <span>笔记</span>
        </div>
        <div class="nav-item" :class="{ active: showUserMenu }" @click="toggleUserMenu">
          <el-icon><User /></el-icon>
          <span>我的</span>
        </div>
      </div>
      
      <!-- 移动端练习模块弹出菜单 -->
      <el-drawer v-model="showPracticeDrawer" direction="btt" size="60%" class="practice-drawer">
        <template #header>
          <h3>选择练习模块</h3>
        </template>
        <div class="practice-menu-grid">
          <div class="practice-menu-item" @click="goToModule('new-politics-practice')">
            <el-icon><Flag /></el-icon>
            <span>时政练习</span>
          </div>
          <div class="practice-menu-item" @click="goToModule('new-common-sense-practice')">
            <el-icon><Compass /></el-icon>
            <span>常识练习</span>
          </div>
          <div class="practice-menu-item" @click="goToModule('new-language-practice')">
            <el-icon><ChatDotRound /></el-icon>
            <span>言语练习</span>
          </div>
          <div class="practice-menu-item" @click="goToModule('new-quantity-practice')">
            <el-icon><DataAnalysis /></el-icon>
            <span>数量练习</span>
          </div>
          <div class="practice-menu-item" @click="goToModule('new-judgment-practice')">
            <el-icon><Finished /></el-icon>
            <span>判断练习</span>
          </div>
          <div class="practice-menu-item" @click="goToModule('new-data-analysis-practice')">
            <el-icon><TrendCharts /></el-icon>
            <span>资料练习</span>
          </div>
          <div class="practice-menu-item" @click="goToModule('new-vocabulary-accumulation-practice')">
            <el-icon><CollectionTag /></el-icon>
            <span>词语积累</span>
          </div>
        </div>
      </el-drawer>
      
      <!-- 移动端用户菜单弹出 -->
      <el-drawer v-model="showUserDrawer" direction="btt" size="40%" class="user-drawer">
        <template #header>
          <h3>用户中心</h3>
        </template>
        <div class="user-menu-content">
          <div v-if="isLoggedIn" class="user-profile">
            <el-avatar :size="60" :src="userAvatar" fit="cover">
              {{ userName.charAt(0).toUpperCase() }}
            </el-avatar>
            <div class="user-name">{{ userName }}</div>
            <div class="user-points">积分: {{ userStore.userPoints }}</div>
          </div>
          <div class="user-menu-items">
            <div v-if="isLoggedIn" class="user-menu-item logout" @click="logout">
              <el-icon><SwitchButton /></el-icon>
              <span>退出登录</span>
            </div>
            <div v-else class="user-menu-item" @click="showLoginModal = true">
              <el-icon><Key /></el-icon>
              <span>登录</span>
            </div>
          </div>
        </div>
      </el-drawer>
      </el-container>
    </el-container>
    
    <!-- 登录和注册模态框 -->
    <LoginModal 
      v-model="showLoginModal" 
      @switch-to-register="handleSwitchToRegister"
      @switch-to-forgot-password="handleSwitchToForgotPassword"
    />
    <RegisterModal 
      v-model="showRegisterModal" 
      @switch-to-login="handleSwitchToLogin"
    />
    <ForgotPasswordModal 
      v-model="showForgotPasswordModal"
      @switch-to-login="handleForgotPasswordToLogin"
      @switch-to-register="handleForgotPasswordToRegister"
    />
    
    <!-- 创建内容选择对话框 -->
    <el-dialog v-model="showCreateDialog" title="选择创建类型" width="500px">
      <div class="create-type-grid">
        <div class="create-type-item" @click="handleCreateTypeSelect('common-sense')">
          <el-icon size="40" color="#409EFF"><Compass /></el-icon>
          <div class="create-type-name">常识积累</div>
          <div class="create-type-desc">记录学到的常识知识</div>
        </div>
        <div class="create-type-item" @click="handleCreateTypeSelect('politics')">
          <el-icon size="40" color="#E6A23C"><Flag /></el-icon>
          <div class="create-type-name">时政积累</div>
          <div class="create-type-desc">记录时事政治内容</div>
        </div>
        <div class="create-type-item" @click="handleCreateTypeSelect('essay-material')">
          <el-icon size="40" color="#67C23A"><Edit /></el-icon>
          <div class="create-type-name">作文素材</div>
          <div class="create-type-desc">积累写作素材</div>
        </div>
        <div class="create-type-item" @click="handleCreateTypeSelect('note')">
          <el-icon size="40" color="#909399"><Notebook /></el-icon>
          <div class="create-type-name">笔记</div>
          <div class="create-type-desc">记录学习笔记</div>
        </div>
      </div>
    </el-dialog>
    
    <!-- 创建内容表单对话框 -->
    <el-dialog v-model="showCreateFormDialog" :title="getCreateFormTitle()" width="600px">
      <el-form :model="createForm" label-width="80px">
        <el-form-item label="标题" required>
          <el-input v-model="createForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容" required>
          <el-input 
            v-model="createForm.content" 
            type="textarea" 
            :rows="8" 
            placeholder="请输入内容" 
          />
        </el-form-item>
        <el-form-item label="分类" v-if="createContentType === 'common-sense' || createContentType === 'politics' || createContentType === 'essay-material'">
          <el-input v-model="createForm.category" placeholder="请输入分类（可选）" />
        </el-form-item>
        <el-form-item label="标签" v-if="createContentType === 'essay-material'">
          <el-input v-model="createForm.tags" placeholder="请输入标签，多个标签用逗号分隔（可选）" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCreateFormDialog = false">取消</el-button>
          <el-button type="primary" @click="handleCreateSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/user';
import { ElMessage } from 'element-plus';
import { getPoliticsQuestions } from '../api/politics';
import { getCommonSenseQuestions } from '../api/commonSense';
import { getLanguageQuestions } from '../api/language';
import { getQuantityQuestions } from '../api/quantity';
import { getJudgmentQuestions } from '../api/judgment';
import { ElDialog } from 'element-plus';
import { getDataAnalysisQuestions } from '../api/dataAnalysis';
import { userCheckin, getCheckinStatus } from '../api/checkin';
import { getUserPoints } from '../api/user';
// 添加积累数据API导入
import { getCommonSenseAccumulations } from '../api/commonSenseAccumulation';
import { getPoliticsAccumulations } from '../api/politicsAccumulation';
import { getWritingMaterials } from '../api/writingMaterialAccumulation';
import { getVocabularyList, getAllVocabularyList } from '../api/vocabulary';
import { getAllNotes } from '../api/note';
import type { CommonSenseAccumulation, PoliticsAccumulation, WritingMaterialAccumulation } from '../types/accumulation';
import type { VocabularyWord } from '../types/vocabulary';
import type { Note } from '../types/note';
import LoginModal from '../components/AuthModals/LoginModal.vue';
import RegisterModal from '../components/AuthModals/RegisterModal.vue';
import ForgotPasswordModal from '../components/AuthModals/ForgotPasswordModal.vue';

// 页面加载状态
const pageLoading = ref(true);

import {
  HomeFilled,
  Flag,
  Compass,
  ChatDotRound,
  DataAnalysis,
  Finished,
  Document,
  Setting,
  User,
  Histogram,
  SwitchButton,
  Key,
  ArrowDown,
  Reading,
  Calendar,
  QuestionFilled,
  Trophy,
  Star,
  Right,
  Warning,
  TrendCharts,
  Medal,
  Check,
  Lock,
  House,
  CollectionTag,
  Edit,
  Collection,
  Clock,
  Search,
  Expand,
  Fold,
  ArrowRight,
  Notebook,
  Plus,
  FolderOpened,
  Link
} from '@element-plus/icons-vue';

// 初始化 activeIndex（根据当前路由动态设置）
const activeIndex = ref('home');
const router = useRouter();
const userStore = useUserStore();

// 移动端相关状态
const isMobile = ref(false);
const isMenuCollapsed = ref(true); // 默认收起菜单
const isSidebarCollapsed = ref(false);
const showPracticeDrawer = ref(false);
const showUserDrawer = ref(false);
const showUserMenu = ref(false);

// 创建内容相关状态
const showCreateDialog = ref(false);
const createContentType = ref('');
const showCreateFormDialog = ref(false);
const createForm = ref({
  title: '',
  content: '',
  category: '',
  tags: ''
});

// 首页积累内容相关状态
const selectedHomeItem = ref<any>(null); // 选中的积累项
const selectedHomeCategory = ref<string>(''); // 选中的分类
const expandedCategories = ref<string[]>(['common-sense']); // 默认展开常识积累

// 计算属性：判断是否显示积累内容
const shouldShowAccumulation = computed(() => {
  const currentRoute = router.currentRoute.value;
  // 如果有子路由（如 /practice-settings/* 或 /paper-test/settings），则不显示积累内容
  return !currentRoute.matched.some(record => 
    record.name === 'PracticeSettings' || record.name === 'PaperTestSettings'
  );
});

// 计算属性：判断是否显示搜索框
const shouldShowSearchBar = computed(() => {
  const currentRoute = router.currentRoute.value;
  // 在练习设置页面和试卷测试设置页面隐藏搜索框
  return !currentRoute.matched.some(record => 
    record.name === 'PracticeSettings' || record.name === 'PaperTestSettings'
  );
});

// 监听路由变化
watch(
  () => router.currentRoute.value.path,
  (newPath) => {
    console.log('路由变化，新路径:', newPath);
    // 根据路由更新 activeIndex
    if (newPath === '/') {
      activeIndex.value = 'home';
      console.log('设置 activeIndex 为 home');
    } else if (newPath.startsWith('/paper-test')) {
      activeIndex.value = 'paper-test';
      console.log('设置 activeIndex 为 paper-test');
    } else if (newPath.startsWith('/practice-settings/')) {
      // 设置页面路由，不设置 activeIndex 为 'home'，让子路由正常显示
      activeIndex.value = 'practice-settings';
      console.log('设置 activeIndex 为 practice-settings');
    } else {
      // 其他子路由也不要显示 home
      activeIndex.value = 'other';
      console.log('设置 activeIndex 为 other');
    }
  },
  { immediate: true } // 立即执行一次
);

// 菜单切换方法
const toggleMenu = () => {
  isMenuCollapsed.value = !isMenuCollapsed.value;
};

// 模态框控制状态
const showLoginModal = ref(false);
const showRegisterModal = ref(false);
const showForgotPasswordModal = ref(false);

// 用户登录状态和信息
const isLoggedIn = computed(() => {
  return !!localStorage.getItem('token') || !!userStore.token;
});

// 页面加载时的初始化操作在下方的 onMounted 钩子中统一处理

const currentUser = computed(() => {
  // 优先从userStore获取用户信息，确保获取到最新的数据
  if (userStore.userInfo) {
      return userStore.userInfo;
    }
    // 如果userStore中没有用户信息，再尝试从localStorage获取
  const userFromStorage = localStorage.getItem('user');
  if (userFromStorage) {
    return JSON.parse(userFromStorage);
  }
  return null;
});

const userName = computed(() => {
  return currentUser.value?.username || currentUser.value?.nickname || '用户';
});

const userAvatar = computed(() => {
  return currentUser.value?.avatar || '';
});

// 添加：监听用户信息更新事件
const handleUserInfoUpdated = (event: CustomEvent) => {
  // 添加调试日志
  console.log('Practice.vue接收到用户信息更新事件:', event.detail);
  // 更新用户store中的信息
  userStore.setUserInfo(event.detail);
  console.log('Practice.vue已更新用户信息，新的头像URL:', event.detail?.avatar);
};

// 在组件挂载时添加事件监听器
onMounted(() => {
  window.addEventListener('user-info-updated', handleUserInfoUpdated as EventListener);
  
  // 原有的初始化逻辑
  checkMobile();
  window.addEventListener('resize', handleResize);
  
  // 原有的初始化逻辑
  fetchUserStudyData();
  fetchUserCheckinInfo();
});

// 在组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('user-info-updated', handleUserInfoUpdated as EventListener);
  window.removeEventListener('resize', handleResize);
});

// 学习统计数据
const studyDays = ref(0);
// 检查签到状态是否需要重置
const resetCheckinStatus = () => {
  const lastCheckinDate = localStorage.getItem('lastCheckinDate');
  const today = new Date().toISOString().split('T')[0];
  if (lastCheckinDate !== today) {
    localStorage.removeItem('checkedInToday');
    localStorage.removeItem('lastCheckinDate');
    return false;
  }
  return localStorage.getItem('checkedInToday') === 'true';
};

const checkedInToday = ref(resetCheckinStatus());
const completedQuestions = ref({
   时政题目: 0,
   常识题目: 0,
   言语题目: 0,
   数量题目: 0,
   判断题目: 0,
   资料题目: 0
  });
const totalQuestions = computed(() => {
  return Object.values(completedQuestions.value).reduce((a, b) => a + b, 0);
});

// 头衔系统
const titleConfig = {
  '萌新学徒': { min: 1, max: 10, description: '初探题海的小萌新，保持好奇心！' },
  '青铜思考者': { min: 11, max: 50, description: '逻辑的齿轮开始转动啦~' },
  '白银解题手': { min: 51, max: 100, description: '已能熟练拆解基础难题！' },
  '黄金破题师': { min: 101, max: 200, description: '题目陷阱都逃不过你的眼睛！' },
  '白金智囊': { min: 201, max: 500, description: '解题如行云流水，思路清晰！' },
  '钻石逻辑王': { min: 501, max: 1000, description: '复杂问题也能庖丁解牛！' },
  '星耀学者': { min: 1001, max: 2000, description: '题海中的方法论大师！' },
  '王者题圣': { min: 2001, max: 5000, description: '信手拈来皆是解题套路！' },
  '传奇题神': { min: 5001, max: 10000, description: '题目见你都要瑟瑟发抖！' }
};

const currentTitle = computed(() => {
  const total = totalQuestions.value;
  for (const [title, config] of Object.entries(titleConfig)) {
    if (total >= config.min && total <= config.max) {
      return { title, ...config };
    }
  }
  return { title: '萌新学徒', ...titleConfig['萌新学徒'] };
});

// 模块进度数据
const moduleProgress = ref({
  politics: 0,
  commonSense: 0,
  language: 0,
  quantity: 0,
  judgment: 0,
  dataAnalysis: 0
});

// 积累数据
const commonSenseAccumulations = ref<CommonSenseAccumulation[]>([]);
const politicsAccumulations = ref<PoliticsAccumulation[]>([]);
const essayMaterials = ref<WritingMaterialAccumulation[]>([]);
const vocabularyAccumulations = ref<VocabularyWord[]>([]);
const notes = ref<Note[]>([]);

// 添加：所有词语积累数据（用于搜索）
const allVocabularyList = ref<VocabularyWord[]>([]);

// 添加：选中的词语
const selectedVocabulary = ref<VocabularyWord | null>(null);

// 添加用于过滤的笔记数据
const filteredNotes = ref<Note[]>([]);
const uniqueNoteTitles = computed(() => {
  const titles = new Set<string>();
  notes.value.forEach(note => {
    if (note.title) {
      titles.add(note.title);
    }
  });
  return Array.from(titles);
});

// 添加用于过滤的常识积累数据
const filteredCommonSense = ref<CommonSenseAccumulation[]>([]);
const uniqueCommonSenseTitles = computed(() => {
  const titles = new Set<string>();
  commonSenseAccumulations.value.forEach(item => {
    if (item.title) {
      titles.add(item.title);
    }
  });
  return Array.from(titles);
});

// 添加用于过滤的时政积累数据
const filteredPolitics = ref<PoliticsAccumulation[]>([]);
const uniquePoliticsTitles = computed(() => {
  const titles = new Set<string>();
  politicsAccumulations.value.forEach(item => {
    if (item.title) {
      titles.add(item.title);
    }
  });
  return Array.from(titles);
});

// 添加用于过滤的作文素材数据
const filteredEssayMaterials = ref<WritingMaterialAccumulation[]>([]);
const uniqueEssayTitles = computed(() => {
  const titles = new Set<string>();
  essayMaterials.value.forEach(item => {
    if (item.title) {
      titles.add(item.title);
    }
  });
  return Array.from(titles);
});

// 添加内容预览计算属性
const getContentPreview = (content: string, maxLength: number = 100) => {
  if (!content) return '';
  
  // 简单的HTML清理，移除危险标签
  const cleanedHtml = content
    .replace(/<script[^>]*>.*?<\/script>/gi, '')
    .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '')
    .replace(/javascript:/gi, '');
  
  // 返回完整的HTML内容，不截取
  return cleanedHtml;
};

// 词语积累分页数据
const vocabularyPagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 词语积累搜索表单
const vocabularySearchForm = ref({
  keyword: ''
});

// 修改分页处理函数，添加日志以便调试


// 左侧导航栏激活项
const activeAccumulationTab = ref('');

// 搜索相关状态
const searchKeyword = ref('');
const searchHistory = ref<string[]>([]);
const hotSearchItems = ref<SearchResultItem[]>([]);
const autocompleteRef = ref();

// 搜索结果类型定义
interface SearchResultItem {
  id?: number;
  title: string;
  type?: 'common-sense' | 'politics' | 'essay-material' | 'vocabulary' | 'note';
  typeName?: string;
  icon?: any;
  data?: any;
  value?: string;
  isHeader?: boolean;
  isHeaderRow?: boolean;
  isRow?: boolean;
  disabled?: boolean;
  isHistory?: boolean;
  isHot?: boolean;
  showClear?: boolean;
  historyItem?: any;
  hotItem?: any;
}

// 所有积累内容的搜索索引（优化性能）
const allSearchItems = computed<SearchResultItem[]>(() => {
  const items: SearchResultItem[] = [];
  
  // 批量处理函数，减少代码重复
  const addItems = (source: any[], type: string, typeName: string, icon: any, titleKey: string = 'title') => {
    for (let i = 0; i < source.length; i++) {
      const item = source[i];
      if (item.id && item[titleKey]) {
        items.push({
          id: item.id,
          title: item[titleKey],
          type: type as any,
          typeName,
          icon,
          data: item
        });
      }
    }
  };
  
  // 批量添加各类型数据
  addItems(commonSenseAccumulations.value, 'common-sense', '常识积累', Compass);
  addItems(politicsAccumulations.value, 'politics', '时政积累', Flag);
  addItems(essayMaterials.value, 'essay-material', '作文素材', Document);
  addItems(allVocabularyList.value, 'vocabulary', '词语积累', CollectionTag, 'word');
  addItems(notes.value, 'note', '我的笔记', Edit);
  
  return items;
});

// 保存积累内容状态到sessionStorage
const saveAccumulationState = (tab: string, filterKey?: string) => {
  if (tab) {
    sessionStorage.setItem('activeAccumulationTab', tab);
    if (filterKey) {
      sessionStorage.setItem('accumulationFilterKey', filterKey);
    } else {
      sessionStorage.removeItem('accumulationFilterKey');
    }
  } else {
    sessionStorage.removeItem('activeAccumulationTab');
    sessionStorage.removeItem('accumulationFilterKey');
  }
};

// 防抖定时器
let saveHomeStateTimer: number | null = null;

// 保存首页选中状态（使用防抖优化性能）
const saveHomeState = () => {
  // 清除之前的定时器
  if (saveHomeStateTimer) {
    clearTimeout(saveHomeStateTimer);
  }
  
  // 设置新的定时器，300ms 后执行保存
  saveHomeStateTimer = window.setTimeout(() => {
    try {
      if (selectedHomeCategory.value) {
        sessionStorage.setItem('selectedHomeCategory', selectedHomeCategory.value);
      } else {
        sessionStorage.removeItem('selectedHomeCategory');
      }
      
      if (selectedHomeItem.value) {
        sessionStorage.setItem('selectedHomeItem', JSON.stringify({
          id: selectedHomeItem.value.id,
          category: selectedHomeCategory.value
        }));
      } else {
        sessionStorage.removeItem('selectedHomeItem');
      }
      
      if (selectedVocabulary.value) {
        sessionStorage.setItem('selectedVocabulary', JSON.stringify({
          id: selectedVocabulary.value.id
        }));
      } else {
        sessionStorage.removeItem('selectedVocabulary');
      }
      
      // 保存展开的分类
      sessionStorage.setItem('expandedCategories', JSON.stringify(expandedCategories.value));
    } catch (error) {
      console.error('保存首页状态失败:', error);
    }
  }, 300);
};

// 从sessionStorage恢复积累内容状态
const restoreAccumulationState = async () => {
  const savedTab = sessionStorage.getItem('activeAccumulationTab');
  const savedFilterKey = sessionStorage.getItem('accumulationFilterKey');
  
  if (savedTab) {
    activeAccumulationTab.value = savedTab;
    
    // 根据保存的状态恢复对应的数据和过滤
    switch (savedTab) {
      case 'common-sense':
        if (savedFilterKey) {
          filterCommonSenseByTitle(savedFilterKey);
        } else {
          showAllCommonSense();
        }
        break;
      case 'politics':
        if (savedFilterKey) {
          filterPoliticsByTitle(savedFilterKey);
        } else {
          showAllPolitics();
        }
        break;
      case 'essay-material':
        if (savedFilterKey) {
          filterEssayByTitle(savedFilterKey);
        } else {
          showAllEssayMaterials();
        }
        break;
      case 'note':
        if (savedFilterKey) {
          filterNotesByTitle(savedFilterKey);
        } else {
          showAllNotes();
        }
        break;
      case 'vocabulary':
        await fetchVocabularyList(1);
        break;
    }
  }
};

// 恢复首页选中状态
const restoreHomeState = () => {
  try {
    // 恢复展开的分类
    const savedExpandedCategories = sessionStorage.getItem('expandedCategories');
    if (savedExpandedCategories) {
      expandedCategories.value = JSON.parse(savedExpandedCategories);
    }
    
    // 恢复选中的分类
    const savedCategory = sessionStorage.getItem('selectedHomeCategory');
    if (savedCategory) {
      selectedHomeCategory.value = savedCategory;
    }
    
    // 恢复选中的词语
    const savedVocabulary = sessionStorage.getItem('selectedVocabulary');
    if (savedVocabulary) {
      const vocabularyData = JSON.parse(savedVocabulary);
      const vocabulary = allVocabularyList.value.find(v => v.id === vocabularyData.id);
      if (vocabulary) {
        selectedVocabulary.value = vocabulary;
        selectedHomeCategory.value = 'vocabulary';
      }
    }
    
    // 恢复选中的积累项
    const savedItem = sessionStorage.getItem('selectedHomeItem');
    if (savedItem) {
      const itemData = JSON.parse(savedItem);
      const category = itemData.category;
      
      // 根据分类找到对应的项
      let item = null;
      switch (category) {
        case 'common-sense':
          item = commonSenseAccumulations.value.find(i => i.id === itemData.id);
          break;
        case 'politics':
          item = politicsAccumulations.value.find(i => i.id === itemData.id);
          break;
        case 'essay-material':
          item = essayMaterials.value.find(i => i.id === itemData.id);
          break;
        case 'note':
          item = notes.value.find(i => i.id === itemData.id);
          break;
      }
      
      if (item) {
        selectedHomeItem.value = item;
        selectedHomeCategory.value = category;
        
        // 延迟滚动，避免影响页面加载性能
        setTimeout(() => {
          const elementId = `center-${category}-${item.id}`;
          const element = document.getElementById(elementId);
          if (element) {
            element.scrollIntoView({ 
              behavior: 'auto', // 使用 auto 替代 smooth，减少性能消耗
              block: 'center' 
            });
          }
        }, 100);
      }
    }
  } catch (error) {
    console.error('恢复首页状态失败:', error);
  }
};


// 处理积累标签页切换
const handleAccumulationTabChange = (tab: string) => {
  activeIndex.value = tab;
  // 当切换到词语积累标签时，确保加载第一页数据
  if (tab === 'vocabulary') {
    fetchVocabularyList(1);
  }
};

// 过滤笔记按类型
const filterNotesByTitle = (title: string) => {
  filteredNotes.value = notes.value.filter(note => note.title === title);
};

// 显示所有笔记
const showAllNotes = () => {
  filteredNotes.value = [...notes.value];
};

// 过滤常识积累按标题
const filterCommonSenseByTitle = (title: string) => {
  filteredCommonSense.value = commonSenseAccumulations.value.filter(item => item.title === title);
};

// 显示所有常识积累
const showAllCommonSense = () => {
  filteredCommonSense.value = [...commonSenseAccumulations.value];
};

// 过滤时政积累按标题
const filterPoliticsByTitle = (title: string) => {
  filteredPolitics.value = politicsAccumulations.value.filter(item => item.title === title);
};

// 显示所有时政积累
const showAllPolitics = () => {
  filteredPolitics.value = [...politicsAccumulations.value];
};

// 过滤作文素材按标题
const filterEssayByTitle = (title: string) => {
  filteredEssayMaterials.value = essayMaterials.value.filter(item => item.title === title);
};

// 显示所有作文素材
const showAllEssayMaterials = () => {
  filteredEssayMaterials.value = [...essayMaterials.value];
};

// 获取积累数据的方法
const fetchAccumulationData = async () => {
  // 只有在用户登录时才获取积累数据
  if (!isLoggedIn.value) {
    console.log('用户未登录，不加载积累数据');
    return;
  }
  
  console.log('开始加载积累数据...');
  
  try {
    // 获取常识积累数据
    const commonSenseRes: any = await getCommonSenseAccumulations();
    console.log('常识积累响应数据:', commonSenseRes);
    if (commonSenseRes && commonSenseRes.code === 200) {
      commonSenseAccumulations.value = commonSenseRes.data || [];
      console.log('常识积累数据数量:', commonSenseAccumulations.value.length);
      // 初始化过滤后的常识积累为所有常识积累
      filteredCommonSense.value = commonSenseAccumulations.value || [];
    } else {
      console.error('获取常识积累数据失败:', commonSenseRes?.message);
      ElMessage.error('获取常识积累数据失败: ' + (commonSenseRes?.message || ''));
    }
    
    // 获取时政积累数据
    const politicsRes: any = await getPoliticsAccumulations();
    console.log('时政积累响应数据:', politicsRes);
    if (politicsRes && politicsRes.code === 200) {
      politicsAccumulations.value = politicsRes.data || [];
      console.log('时政积累数据数量:', politicsAccumulations.value.length);
      // 初始化过滤后的时政积累为所有时政积累
      filteredPolitics.value = politicsAccumulations.value || [];
    } else {
      console.error('获取时政积累数据失败:', politicsRes?.message);
      ElMessage.error('获取时政积累数据失败: ' + (politicsRes?.message || ''));
    }
    
    // 获取作文素材数据
    const writingMaterialRes: any = await getWritingMaterials();
    console.log('作文素材响应数据:', writingMaterialRes);
    if (writingMaterialRes && writingMaterialRes.code === 200) {
      essayMaterials.value = writingMaterialRes.data || [];
      console.log('作文素材数据数量:', essayMaterials.value.length);
      // 初始化过滤后的作文素材为所有作文素材
      filteredEssayMaterials.value = essayMaterials.value || [];
    } else {
      console.error('获取作文素材数据失败:', writingMaterialRes?.message);
      ElMessage.error('获取作文素材数据失败: ' + (writingMaterialRes?.message || ''));
    }
    
    // 获取词语积累数据（分页）
    await fetchVocabularyList();
    
    // 获取所有词语积累数据（用于搜索）
    await fetchAllVocabularyList();
    
    // 获取笔记数据
    const notesRes: any = await getAllNotes();
    console.log('笔记响应数据:', notesRes);
    if (notesRes && notesRes.code === 200) {
      notes.value = notesRes.data || [];
      console.log('笔记数据数量:', notes.value.length);
      // 初始化过滤后的笔记为所有笔记
      filteredNotes.value = notes.value || [];
    } else {
      console.error('获取笔记数据失败:', notesRes?.message);
      ElMessage.error('获取笔记数据失败: ' + (notesRes?.message || ''));
    }
    
    console.log('积累数据加载完成');
  } catch (error) {
    console.error('获取积累数据异常:', error);
    ElMessage.error('获取积累数据失败，请稍后重试: ' + (error as Error).message);
  }
};




// 获取常识积累数据
const fetchCommonSenseData = async () => {
  try {
    const res: any = await getCommonSenseAccumulations();
    console.log('常识积累响应数据:', res);
    if (res && res.code === 200) {
      commonSenseAccumulations.value = res.data || [];
      filteredCommonSense.value = commonSenseAccumulations.value || [];
    } else {
      console.error('获取常识积累数据失败:', res?.message);
      ElMessage.error('获取常识积累数据失败: ' + (res?.message || ''));
    }
  } catch (error) {
    console.error('获取常识积累数据异常:', error);
    ElMessage.error('获取常识积累数据失败，请稍后重试: ' + (error as Error).message);
  }
};

// 获取时政积累数据
const fetchPoliticsData = async () => {
  try {
    const res: any = await getPoliticsAccumulations();
    console.log('时政积累响应数据:', res);
    if (res && res.code === 200) {
      politicsAccumulations.value = res.data || [];
      filteredPolitics.value = politicsAccumulations.value || [];
    } else {
      console.error('获取时政积累数据失败:', res?.message);
      ElMessage.error('获取时政积累数据失败: ' + (res?.message || ''));
    }
  } catch (error) {
    console.error('获取时政积累数据异常:', error);
    ElMessage.error('获取时政积累数据失败，请稍后重试: ' + (error as Error).message);
  }
};

// 获取作文素材数据
const fetchEssayMaterialData = async () => {
  try {
    const res: any = await getWritingMaterials();
    console.log('作文素材响应数据:', res);
    if (res && res.code === 200) {
      essayMaterials.value = res.data || [];
      filteredEssayMaterials.value = essayMaterials.value || [];
    } else {
      console.error('获取作文素材数据失败:', res?.message);
      ElMessage.error('获取作文素材数据失败: ' + (res?.message || ''));
    }
  } catch (error) {
    console.error('获取作文素材数据异常:', error);
    ElMessage.error('获取作文素材数据失败，请稍后重试: ' + (error as Error).message);
  }
};

// 获取笔记数据
const fetchNotesData = async () => {
  try {
    const res: any = await getAllNotes();
    console.log('笔记响应数据:', res);
    if (res && res.code === 200) {
      notes.value = res.data || [];
      filteredNotes.value = notes.value || [];
    } else {
      console.error('获取笔记数据失败:', res?.message);
      ElMessage.error('获取笔记数据失败: ' + (res?.message || ''));
    }
  } catch (error) {
    console.error('获取笔记数据异常:', error);
    ElMessage.error('获取笔记数据失败，请稍后重试: ' + (error as Error).message);
  }
};

// 获取词语积累数据（分页）
const fetchVocabularyList = async (page = 1) => {
  try {
    // 确保使用正确的参数名 pageNum 而不是 page
    const params = {
      pageNum: page,
      pageSize: vocabularyPagination.value.pageSize,
      keyword: vocabularySearchForm.value.keyword || undefined
    };
    const vocabularyRes: any = await getVocabularyList(params);
    if (vocabularyRes && vocabularyRes.code === 200) {
      vocabularyAccumulations.value = vocabularyRes.data.list || [];
      vocabularyPagination.value.total = vocabularyRes.data.total || 0;
      vocabularyPagination.value.currentPage = page;
      console.log('词语积累分页数据:', vocabularyRes.data); // 添加日志以便调试
    } else {
      console.error('获取词语积累数据失败:', vocabularyRes?.message);
      ElMessage.error('获取词语积累数据失败');
    }
  } catch (error) {
    console.error('获取词语积累数据异常:', error);
    ElMessage.error('获取词语积累数据失败，请稍后重试');
  }
};

// 获取所有词语积累数据（用于搜索）
const fetchAllVocabularyList = async () => {
  try {
    const vocabularyRes: any = await getAllVocabularyList();
    if (vocabularyRes && vocabularyRes.code === 200) {
      allVocabularyList.value = vocabularyRes.data || [];
      console.log('所有词语积累数据:', vocabularyRes.data);
    } else {
      console.error('获取所有词语积累数据失败:', vocabularyRes?.message);
    }
  } catch (error) {
    console.error('获取所有词语积累数据异常:', error);
  }
};

// 搜索词语积累
const searchVocabulary = async () => {
  await fetchVocabularyList(1);
};

// 重置词语积累搜索
const resetVocabularySearch = async () => {
  vocabularySearchForm.value.keyword = '';
  await fetchVocabularyList(1);
};

// 词语积累分页变化处理
const handleVocabularyPageChange = (page: number) => {
  console.log('分页变化，当前页:', page);
  fetchVocabularyList(page);
};

// 搜索建议查询（优化性能）
const querySearchAsync = (queryString: string, cb: (results: any[]) => void) => {
  // 如果没有输入，显示搜索历史和热门搜索
  if (!queryString) {
    loadSearchHistory();
    
    const suggestions: any[] = [];
    
    if (searchHistory.value.length === 0 && hotSearchItems.value.length > 0) {
      suggestions.push({
        value: 'hot-header',
        isHeader: true,
        disabled: true,
        title: '搜索发现'
      });
      
      // 直接使用 slice 而不是 forEach
      hotSearchItems.value.slice(0, 10).forEach((hotItem, index) => {
        suggestions.push({
          id: hotItem.id,
          title: hotItem.title,
          type: hotItem.type,
          data: hotItem.data,
          value: hotItem.title || `hot-${index}`
        });
      });
    } 
    else if (searchHistory.value.length > 0 || hotSearchItems.value.length > 0) {
      suggestions.push({
        value: 'header-row',
        isHeaderRow: true,
        disabled: true
      });
      
      const maxRows = Math.min(
        Math.max(
          Math.min(searchHistory.value.length, 10),
          Math.min(hotSearchItems.value.length, 10)
        ),
        10
      );
      
      // 批量添加，减少 push 次数
      const rows = [];
      for (let i = 0; i < maxRows; i++) {
        const historyItem = searchHistory.value[i];
        const hotItem = hotSearchItems.value[i];
        
        rows.push({
          value: `row-${i}`,
          isRow: true,
          disabled: true,
          historyItem: historyItem ? {
            keyword: historyItem,
            data: allSearchItems.value.find(item => 
              item.title.toLowerCase().includes(historyItem.toLowerCase())
            )
          } : null,
          hotItem: hotItem || null
        });
      }
      suggestions.push(...rows);
    }
    
    cb(suggestions);
    return;
  }
  
  // 使用小写查询串，减少重复转换
  const lowerQuery = queryString.toLowerCase();
  const results = allSearchItems.value.filter(item => 
    item.title.toLowerCase().includes(lowerQuery)
  );
  
  // 直接添加 value 属性，使用 map 更高效
  cb(results.map(item => ({ ...item, value: item.title })));
};

// 处理搜索选择
const handleSearchSelect = (item: SearchResultItem) => {
  console.log('选中的搜索项:', item);
  
  // 立即清空搜索框，阻止 autocomplete 的默认填充
  setTimeout(() => {
    searchKeyword.value = '';
  }, 0);
  
  // 如果是头部项、行项或禁用项，不处理
  if (item.isHeader || item.isHeaderRow || item.isRow || item.disabled) {
    return;
  }
  
  // 保存搜索历史
  const keyword = item.title || item.value || '';
  if (keyword) {
    saveSearchHistory(keyword);
  }
  
  // 移动端自动收缩菜单
  if (isMobile.value && !isMenuCollapsed.value) {
    isMenuCollapsed.value = true;
  }
  
  // 根据类型直接跳转到对应的详情页面
  if (item.type && item.id) {
    switch (item.type) {
      case 'common-sense':
        viewCommonSenseDetail(item.data || { id: item.id });
        ElMessage.success(`正在查看常识积累: ${item.title}`);
        break;
      case 'politics':
        viewPoliticsDetail(item.data || { id: item.id });
        ElMessage.success(`正在查看时政积累: ${item.title}`);
        break;
      case 'essay-material':
        viewEssayDetail(item.data || { id: item.id });
        ElMessage.success(`正在查看作文素材: ${item.title}`);
        break;
      case 'note':
        viewNoteDetail(item.data || { id: item.id });
        ElMessage.success(`正在查看笔记: ${item.title}`);
        break;
      case 'vocabulary':
        // 词语积累跳转到首页并显示详情
        router.push('/');
        // 调用selectVocabulary方法显示详情
        if (item.data) {
          selectVocabulary(item.data);
        }
        ElMessage.success(`正在查看词语: ${item.title}`);
        break;
      default:
        ElMessage.warning('未知的内容类型');
    }
  }
};

// 处理点击历史搜索项
const handleHistoryClick = (keyword: string, data: any) => {
  saveSearchHistory(keyword);
  
  if (data) {
    searchKeyword.value = '';
    if (isMobile.value && !isMenuCollapsed.value) {
      isMenuCollapsed.value = true;
    }
    
    // 根据类型直接跳转到对应的详情页面
    if (data.type && data.id) {
      switch (data.type) {
        case 'common-sense':
          viewCommonSenseDetail(data.data || { id: data.id });
          ElMessage.success(`正在查看常识积累: ${data.title}`);
          break;
        case 'politics':
          viewPoliticsDetail(data.data || { id: data.id });
          ElMessage.success(`正在查看时政积累: ${data.title}`);
          break;
        case 'essay-material':
          viewEssayDetail(data.data || { id: data.id });
          ElMessage.success(`正在查看作文素材: ${data.title}`);
          break;
        case 'note':
          viewNoteDetail(data.data || { id: data.id });
          ElMessage.success(`正在查看笔记: ${data.title}`);
          break;
        case 'vocabulary':
          // 词语积累跳转到首页并显示详情
          router.push('/');
          if (data.data) {
            selectVocabulary(data.data);
          }
          ElMessage.success(`正在查看词语: ${data.title}`);
          break;
      }
    }
  }
};

// 处理点击热门搜索项
const handleHotClick = (item: any) => {
  if (item && item.title) {
    saveSearchHistory(item.title);
    
    searchKeyword.value = '';
    if (isMobile.value && !isMenuCollapsed.value) {
      isMenuCollapsed.value = true;
    }
    
    // 根据类型直接跳转到对应的详情页面
    if (item.type && item.id) {
      switch (item.type) {
        case 'common-sense':
          viewCommonSenseDetail(item.data || { id: item.id });
          ElMessage.success(`正在查看常识积累: ${item.title}`);
          break;
        case 'politics':
          viewPoliticsDetail(item.data || { id: item.id });
          ElMessage.success(`正在查看时政积累: ${item.title}`);
          break;
        case 'essay-material':
          viewEssayDetail(item.data || { id: item.id });
          ElMessage.success(`正在查看作文素材: ${item.title}`);
          break;
        case 'note':
          viewNoteDetail(item.data || { id: item.id });
          ElMessage.success(`正在查看笔记: ${item.title}`);
          break;
        case 'vocabulary':
          // 词语积累跳转到首页并显示详情
          router.push('/');
          if (item.data) {
            selectVocabulary(item.data);
          }
          ElMessage.success(`正在查看词语: ${item.title}`);
          break;
      }
    }
  }
};

// 处理搜索回车或点击搜索按钮
const handleSearchEnter = () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词');
    return;
  }
  
  // 保存搜索历史
  saveSearchHistory(searchKeyword.value.trim());
  
  // 根据关键词过滤搜索结果
  const results = allSearchItems.value.filter(item => {
    return item.title.toLowerCase().includes(searchKeyword.value.toLowerCase());
  });
  
  if (results.length === 0) {
    ElMessage.info('未找到匹配的内容');
    return;
  }
  
  // 如果只有一个结果，直接跳转
  if (results.length === 1) {
    handleSearchSelect(results[0]);
  } else {
    // 多个结果，自动触发下拉列表显示
    ElMessage.info(`找到 ${results.length} 条匹配结果，请选择`);
  }
};

// 保存搜索历史
const saveSearchHistory = (keyword: string) => {
  if (!keyword || !keyword.trim()) return;
  
  const trimmedKeyword = keyword.trim();
  
  // 移除重复的关键词
  const index = searchHistory.value.indexOf(trimmedKeyword);
  if (index > -1) {
    searchHistory.value.splice(index, 1);
  }
  
  // 添加到最前面
  searchHistory.value.unshift(trimmedKeyword);
  
  // 最多保留10条历史记录
  if (searchHistory.value.length > 10) {
    searchHistory.value = searchHistory.value.slice(0, 10);
  }
  
  // 保存到localStorage
  localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));
};

// 加载搜索历史
const loadSearchHistory = () => {
  try {
    const history = localStorage.getItem('searchHistory');
    if (history) {
      searchHistory.value = JSON.parse(history);
    }
  } catch (error) {
    console.error('加载搜索历史失败:', error);
    searchHistory.value = [];
  }
};

// 清空搜索历史
const clearSearchHistory = () => {
  searchHistory.value = [];
  localStorage.removeItem('searchHistory');
  ElMessage.success('搜索历史已清空');
  
  // 直接关闭下拉列表并清除缓存
  if (autocompleteRef.value) {
    autocompleteRef.value.close();
    // 清除组件内部建议缓存
    autocompleteRef.value.suggestions = [];
  }
};

// 搜索框聚焦时的处理
const onSearchFocus = () => {
  // 重新加载搜索历史，确保显示最新的数据
  loadSearchHistory();
};

// 初始化热门搜索/搜索发现（优化性能）
const initHotSearch = () => {
  // 使用 Fisher-Yates 算法优化打乱性能
  const shuffleArray = (array: any[]) => {
    const result = [...array];
    for (let i = result.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [result[i], result[j]] = [result[j], result[i]];
    }
    return result;
  };
  
  // 批量处理函数，减少代码重复
  const prepareItems = (source: any[], type: string, typeName: string, icon: any, titleKey: string = 'title') => {
    return source.map(item => ({
      id: item.id,
      title: item[titleKey],
      type: type as const,
      typeName,
      icon,
      data: item
    }));
  };
  
  // 准备各类型数据
  const itemGroups = [
    prepareItems(commonSenseAccumulations.value, 'common-sense', '常识积累', Compass),
    prepareItems(politicsAccumulations.value, 'politics', '时政积累', Flag),
    prepareItems(essayMaterials.value, 'essay-material', '作文素材', Edit),
    prepareItems(notes.value, 'note', '我的笔记', Notebook),
    prepareItems(allVocabularyList.value, 'vocabulary', '词语积累', CollectionTag, 'word')
  ];
  
  const selectedItems: any[] = [];
  const remainingItems: any[] = [];
  
  // 每种类型取2条
  itemGroups.forEach(items => {
    if (items.length > 0) {
      const shuffled = shuffleArray(items);
      selectedItems.push(...shuffled.slice(0, 2));
      remainingItems.push(...shuffled.slice(2));
    }
  });
  
  // 如果不足10条，从剩余的所有项中补充
  if (selectedItems.length < 10 && remainingItems.length > 0) {
    const neededCount = 10 - selectedItems.length;
    const shuffledRemaining = shuffleArray(remainingItems);
    selectedItems.push(...shuffledRemaining.slice(0, neededCount));
  }
  
  // 最终再次随机打乱
  hotSearchItems.value = shuffleArray(selectedItems).slice(0, 10);
};

// 格式化进度百分比
const percentageFormat = (percentage: number) => {
  return percentage === 100 ? '完成' : `${percentage}%`;
};

// 获取用户学习数据
const fetchUserStudyData = async () => {
  if (!isLoggedIn.value) return;
  
  try {
    // 获取各模块题目数量
    const [politics, commonSense, language, quantity, judgment, dataAnalysis] = await Promise.all([
      getPoliticsQuestions({ count: true }),
      getCommonSenseQuestions({ count: true }),
      getLanguageQuestions({ count: true }),
      getQuantityQuestions({ count: true }),
      getJudgmentQuestions({ count: true }),
      getDataAnalysisQuestions({ count: true })
    ]);

    completedQuestions.value = {
      时政题目: politics.data.total || 0,
      常识题目: commonSense.data.total || 0,
      言语题目: language.data.total || 0,
      数量题目: quantity.data.total || 0,
      判断题目: judgment.data.total || 0,
      资料题目: dataAnalysis.data.total || 0
    };

    // 计算每个模块的完成进度
    const totalQuestionsByModule = {
      时政题目: 25,
      常识题目: 30,
      言语题目: 20,
      数量题目: 15,
      判断题目: 18,
      资料题目: 12
    };

    moduleProgress.value = {
      politics: Math.round((completedQuestions.value.时政题目 / totalQuestionsByModule.时政题目) * 100),
      commonSense: Math.round((completedQuestions.value.常识题目 / totalQuestionsByModule.常识题目) * 100),
      language: Math.round((completedQuestions.value.言语题目 / totalQuestionsByModule.言语题目) * 100),
      quantity: Math.round((completedQuestions.value.数量题目 / totalQuestionsByModule.数量题目) * 100),
       judgment: Math.round((completedQuestions.value.判断题目 / totalQuestionsByModule.判断题目) * 100),
       dataAnalysis: Math.round((completedQuestions.value.资料题目 / totalQuestionsByModule.资料题目) * 100)
    };

    // 获取连续签到天数和签到状态
    const checkinStatusRes: any = await getCheckinStatus();
    if (checkinStatusRes && checkinStatusRes.code === 200) {
      // 确保连续签到天数正确显示
      if (checkinStatusRes.data.consecutiveDays !== undefined && checkinStatusRes.data.consecutiveDays !== null) {
        studyDays.value = checkinStatusRes.data.consecutiveDays;
        console.log('fetchUserStudyData中获取到的连续签到天数:', studyDays.value);
      }
      // 使用后端返回的checkedInToday字段判断今天是否已签到
      checkedInToday.value = checkinStatusRes.data.checkedInToday;
      localStorage.setItem('checkedInToday', checkinStatusRes.data.checkedInToday.toString());
      if (checkinStatusRes.data.checkedInToday) {
        localStorage.setItem('lastCheckinDate', new Date().toISOString().split('T')[0]);
      }
      
      // 签到日历组件刷新代码已删除
    } else {
      // 只有在API返回错误时才重置为0
      console.log('获取签到状态失败，保持当前连续签到天数:', studyDays.value);
      checkedInToday.value = false;
    }

    // 最近活动功能已删除
  } catch (error) {
    console.error('获取学习数据失败:', error);
    ElMessage.error('获取学习数据失败，请稍后重试');
  }
};

// 监听窗口大小变化
const handleResize = () => {
  checkMobile();
};

// 查看积累详情
const viewAccumulationDetail = (item: any, type: string = 'common-sense') => {
  // 跳转到积累内容区域
  goToAccumulationSection(type);
  // 设置活动标签为指定类型
  activeAccumulationTab.value = type;
  
  // 根据不同类型和标题过滤内容
  if (item.title || item.word) {
    const title = item.title || item.word;
    switch (type) {
      case 'politics':
        filterPoliticsByTitle(title);
        saveAccumulationState('politics', title);
        break;
      case 'vocabulary':
        // 词语积累可能需要特殊处理
        saveAccumulationState('vocabulary');
        break;
      case 'common-sense':
      default:
        filterCommonSenseByTitle(title);
        saveAccumulationState('common-sense', title);
        break;
    }
  }
};

// 首页切换分类（使用节流优化）
const toggleCategory = (category: string) => {
  const index = expandedCategories.value.indexOf(category);
  if (index > -1) {
    expandedCategories.value.splice(index, 1);
  } else {
    expandedCategories.value.push(category);
  }
  // 切换分类时，设置当前分类，但不选中具体项
  selectedHomeCategory.value = category;
  // 清空选中项
  selectedHomeItem.value = null;
  // 保存状态（使用防抖）
  saveHomeState();
  console.log('切换分类:', category, '当前展开的分类:', expandedCategories.value);
};

// 首页选择积累项
const selectHomeItem = (item: any, category: string) => {
  selectedHomeItem.value = item;
  selectedHomeCategory.value = category;
  // 保存状态（使用防抖）
  saveHomeState();
  
  // 使用 requestAnimationFrame 优化滚动性能
  requestAnimationFrame(() => {
    // 根据分类和ID找到对应的元素
    const elementId = `center-${category}-${item.id}`;
    const element = document.getElementById(elementId);
    
    if (element) {
      // 滚动到元素位置，并留出一些偏移量
      element.scrollIntoView({ 
        behavior: 'auto', // 使用 auto 减少性能消耗
        block: 'center' 
      });
    }
  });
};

// 查看笔记详情（在新标签页打开）
const viewNoteDetail = (note: any) => {
  // 构建详情页URL
  const url = router.resolve({
    path: '/note-detail',
    query: {
      id: note.id
    }
  });
  // 在新标签页打开
  window.open(url.href, '_blank');
};

// 查看常识积累详情（在新标签页打开）
const viewCommonSenseDetail = (item: any) => {
  // 构建详情页URL
  const url = router.resolve({
    path: '/common-sense-detail',
    query: {
      id: item.id
    }
  });
  // 在新标签页打开
  window.open(url.href, '_blank');
};

// 查看时政积累详情（在新标签页打开）
const viewPoliticsDetail = (item: any) => {
  // 构建详情页URL
  const url = router.resolve({
    path: '/politics-detail',
    query: {
      id: item.id
    }
  });
  // 在新标签页打开
  window.open(url.href, '_blank');
};

// 查看作文素材详情（在新标签页打开）
const viewEssayDetail = (item: any) => {
  // 构建详情页URL
  const url = router.resolve({
    path: '/essay-detail',
    query: {
      id: item.id
    }
  });
  // 在新标签页打开
  window.open(url.href, '_blank');
};

// 选中词语，在中间区域显示详情
const selectVocabulary = (item: VocabularyWord) => {
  selectedVocabulary.value = item;
  // 设置为词语积累分类
  selectedHomeCategory.value = 'vocabulary';
  selectedHomeItem.value = null;
  // 保存状态
  saveHomeState();
};

// 获取分类标签
const getCategoryLabel = (category: string) => {
  const labels: Record<string, string> = {
    'common-sense': '常识积累',
    'politics': '时政积累',
    'essay-material': '作文素材',
    'note': '我的笔记',
    'vocabulary': '词语积累'
  };
  return labels[category] || category;
};

const goToAIAssistant = () => {
  // 跳转到AI助手页面
  router.push('/ai-assistant');
};

// 创建内容相关方法
const handleCreateTypeSelect = (type: string) => {
  createContentType.value = type;
  showCreateDialog.value = false;
  showCreateFormDialog.value = true;
  // 重置表单
  createForm.value = {
    title: '',
    content: '',
    category: '',
    tags: ''
  };
};

const handleCreateSubmit = async () => {
  if (!createForm.value.title || !createForm.value.content) {
    ElMessage.warning('请填写标题和内容');
    return;
  }
  
  try {
    let response;
    const formData: any = {
      ...createForm.value,
      userId: currentUser.value?.id || userStore.userInfo?.id
    };
    
    switch (createContentType.value) {
      case 'common-sense':
        const { addCommonSenseAccumulation } = await import('@/api/commonSenseAccumulation');
        response = await addCommonSenseAccumulation(formData as any);
        break;
      case 'politics':
        const { addPoliticsAccumulation } = await import('@/api/politicsAccumulation');
        response = await addPoliticsAccumulation(formData as any);
        break;
      case 'essay-material':
        const { addWritingMaterial } = await import('@/api/writingMaterialAccumulation');
        response = await addWritingMaterial(formData as any);
        break;
      case 'note':
        const { addNote } = await import('@/api/note');
        response = await addNote(formData);
        break;
    }
    
    ElMessage.success('创建成功');
    showCreateFormDialog.value = false;
    
    // 刷新对应的数据列表
    switch (createContentType.value) {
      case 'common-sense':
        await fetchCommonSenseData();
        break;
      case 'politics':
        await fetchPoliticsData();
        break;
      case 'essay-material':
        await fetchEssayMaterialData();
        break;
      case 'note':
        await fetchNotesData();
        break;
    }
  } catch (error) {
    console.error('创建失败:', error);
    ElMessage.error('创建失败，请重试');
  }
};

const getCreateFormTitle = () => {
  const titles: Record<string, string> = {
    'common-sense': '创建常识积累',
    'politics': '创建时政积累',
    'essay-material': '创建作文素材',
    'note': '创建笔记'
  };
  return titles[createContentType.value] || '创建内容';
};

// 添加跳转到积累内容区域的方法
const goToAccumulationSection = (type: string = 'common-sense') => {
  // 设置活动索引为积累内容
  activeIndex.value = 'accumulation';
  // 跳转到根路径
  router.push('/');
  // 设置活动积累标签为指定类型
  activeAccumulationTab.value = type;
  // 保存状态
  saveAccumulationState(type);
};

const handleSelect = (key: string) => {
  activeIndex.value = key;
  
  // 点击菜单项后，在移动端自动收缩菜单
  if (isMobile.value && !isMenuCollapsed.value) {
    isMenuCollapsed.value = true;
  }
  
  // 处理首页菜单项
  if (key === 'home' || key === '/') {
    // 跳转到首页，确保回到根路径
    router.push('/');
    // 设置 activeIndex 为 'home'
    activeIndex.value = 'home';
    // 清空积累内容显示状态，显示默认首页内容
    activeAccumulationTab.value = '';
    saveAccumulationState(''); // 清空保存的状态
    // 不清空首页选中状态，让用户回到之前的选中状态
    return;
  } else if (key === '/study-system/wrong-questions') {
    router.push('/study-system/wrong-questions');
    return;
  } else if (key === 'ai-chat-assistant') {
    // 跳转到AI聊天助手页面
    router.push('/ai-assistant');
    return;
  } else if (key === 'new-vocabulary-accumulation-practice') {
    // 词语积累练习，跳转到练习设置页面
    router.push('/practice-settings/vocabulary-accumulation');
    return;
  } else if (key.includes('-accumulation') || 
             key.startsWith('common-sense-') || 
             key.startsWith('politics-') || 
             key.startsWith('essay-') || 
             key.startsWith('note-')) {
    // 处理积累内容菜单项
    const accumulationMap: Record<string, string> = {
      'vocabulary-accumulation': 'vocabulary'
    };
    
    // 处理常识积累子菜单
    if (key === 'common-sense-accumulation-all') {
      router.push('/'); // 确保在根路径
      activeAccumulationTab.value = 'common-sense';
      showAllCommonSense();
      saveAccumulationState('common-sense'); // 保存状态
      return;
    } else if (key.startsWith('common-sense-')) {
      router.push('/'); // 确保在根路径
      activeAccumulationTab.value = 'common-sense';
      const title = key.substring('common-sense-'.length);
      filterCommonSenseByTitle(title);
      saveAccumulationState('common-sense', title); // 保存状态和过滤键
      return;
    }
    
    // 处理时政积累子菜单
    if (key === 'politics-accumulation-all') {
      router.push('/'); // 确保在根路径
      activeAccumulationTab.value = 'politics';
      showAllPolitics();
      saveAccumulationState('politics'); // 保存状态
      return;
    } else if (key.startsWith('politics-')) {
      router.push('/'); // 确保在根路径
      activeAccumulationTab.value = 'politics';
      const title = key.substring('politics-'.length);
      filterPoliticsByTitle(title);
      saveAccumulationState('politics', title); // 保存状态和过滤键
      return;
    }
    
    // 处理作文素材子菜单
    if (key === 'essay-material-accumulation-all') {
      router.push('/'); // 确保在根路径
      activeAccumulationTab.value = 'essay-material';
      showAllEssayMaterials();
      saveAccumulationState('essay-material'); // 保存状态
      return;
    } else if (key.startsWith('essay-')) {
      router.push('/'); // 确保在根路径
      activeAccumulationTab.value = 'essay-material';
      const title = key.substring('essay-'.length);
      filterEssayByTitle(title);
      saveAccumulationState('essay-material', title); // 保存状态和过滤键
      return;
    }
    
    // 处理笔记子菜单
    if (key === 'note-accumulation-all') {
      router.push('/'); // 确保在根路径
      activeAccumulationTab.value = 'note';
      showAllNotes();
      saveAccumulationState('note'); // 保存状态
      return;
    } else if (key.startsWith('note-') && key !== 'note-accumulation-all' && key !== 'note-accumulation') {
      router.push('/'); // 确保在根路径
      activeAccumulationTab.value = 'note';
      const title = key.substring('note-'.length);
      filterNotesByTitle(title);
      saveAccumulationState('note', title); // 保存状态和过滤键
      return;
    }
    
    // 处理词语积累子菜单
    if (key === 'vocabulary-accumulation-all') {
      router.push('/'); // 确保在根路径
      activeAccumulationTab.value = 'vocabulary';
      // 加载第一页词语数据
      fetchVocabularyList(1);
      saveAccumulationState('vocabulary'); // 保存状态
      return;
    }
    
    const accumulationType = accumulationMap[key];
    if (accumulationType) {
      handleAccumulationClick(accumulationType);
      return;
    }
    
    // 拦截所有积累相关的父级菜单项，不进行路由跳转
    if (key === 'accumulation' || 
        key === 'common-sense-accumulation' || 
        key === 'politics-accumulation' || 
        key === 'essay-material-accumulation' || 
        key === 'vocabulary-accumulation' || 
        key === 'note-accumulation') {
      return;
    }
    
    // 拦截所有积累相关的子菜单项，不进行路由跳转
    if (key.startsWith('common-sense-') || 
        key.startsWith('politics-') || 
        key.startsWith('essay-') || 
        key.startsWith('note-')) {
      return;
    }
  } else {
    // 根据不同的练习模块导航到对应的设置页面
    switch (key) {
      case 'new-politics-practice':
        router.push('/practice-settings/politics');
        break;
      case 'new-common-sense-practice':
        router.push('/practice-settings/commonSense');
        break;
      case 'new-language-practice':
        router.push('/practice-settings/language');
        break;
      case 'new-quantity-practice':
        router.push('/practice-settings/quantitative');
        break;
      case 'new-judgment-practice':
        router.push('/practice-settings/judgment');
        break;
      case 'new-data-analysis-practice':
        router.push('/practice-settings/dataAnalysis');
        break;
      case 'new-vocabulary-accumulation-practice':
        router.push('/practice-settings/vocabulary-accumulation');
        break;
      default:
        router.push(key);
    }
  }
};



// 监听路由变化，更新activeIndex
onMounted(async () => {
  const currentPath = router.currentRoute.value.path;
  console.log('组件挂载，当前路径:', currentPath);
  
  // 根据当前路径设置 activeIndex
  if (currentPath === '/') {
    activeIndex.value = 'home';
    console.log('初始化 activeIndex 为 home');
  } else if (currentPath.startsWith('/practice-settings/')) {
    // 练习设置页面
    activeIndex.value = 'practice-settings';
    console.log('初始化 activeIndex 为 practice-settings');
  } else if (currentPath.startsWith('/paper-test')) {
    activeIndex.value = 'paper-test';
    console.log('初始化 activeIndex 为 paper-test');
  } else if (currentPath === '/note-detail' || currentPath === '/common-sense-detail' || 
             currentPath === '/politics-detail' || currentPath === '/essay-detail') {
    // 详情页面
    activeIndex.value = 'detail';
    console.log('初始化 activeIndex 为 detail');
  } else {
    // 其他路径
    activeIndex.value = 'other';
    console.log('初始化 activeIndex 为 other');
  }
  
  // 并行执行所有数据加载任务
  await Promise.all([
    fetchAccumulationData(),
    fetchUserStudyData(),
    fetchUserCheckinInfo()
  ]);
  
  // 仅在首页时恢复积累内容状态（在数据加载完成后）
  if (currentPath === '/') {
    restoreAccumulationState();
    restoreHomeState();
  }
  
  // 后台加载非关键数据
  loadSearchHistory();
  
  // 延迟初始化热门搜索
  if (window.requestIdleCallback) {
    requestIdleCallback(() => {
      initHotSearch();
    }, { timeout: 1000 });
  } else {
    setTimeout(() => {
      initHotSearch();
    }, 500);
  }
  
  // 延迟隐藏加载效果，避免闪烁
  setTimeout(() => {
    pageLoading.value = false;
  }, 100);
});

const goToAdmin = () => {
  // 检查用户是否已登录
  if (isLoggedIn.value) {
    // 如果已登录，在新标签页打开后台管理系统
    const url = router.resolve('/study-system');
    window.open(url.href, '_blank');
  } else {
    // 如果未登录，显示登录模态框
    showLoginModal.value = true;
  }
};

// 跳转到成就页面
const goToAchievements = () => {
  showUserDrawer.value = false;
  router.push('/achievements');
};

// 签到对话框变量已删除
// studyDays 已在前面定义
// 签到详情对话框方法已删除

// 获取用户签到和积分信息
const fetchUserCheckinInfo = async () => {
  // 检查用户是否已登录
  if (!isLoggedIn.value) return;
  
  try {
    const checkinStatus: any = await getCheckinStatus();
    if (checkinStatus && checkinStatus.code === 200 && checkinStatus.data) {
      // 确保连续签到天数正确显示
      if (checkinStatus.data.consecutiveDays !== undefined && checkinStatus.data.consecutiveDays !== null) {
        studyDays.value = checkinStatus.data.consecutiveDays;
        console.log('获取到的连续签到天数:', studyDays.value);
      }
      // 更新今日是否已签到状态
      checkedInToday.value = checkinStatus.data.checkedInToday;
      localStorage.setItem('checkedInToday', checkinStatus.data.checkedInToday.toString());
      if (checkinStatus.data.checkedInToday) {
        localStorage.setItem('lastCheckinDate', new Date().toISOString().split('T')[0]);
      }
    }
    
    // 获取用户积分信息 - 优先从userStore获取，如果没有再请求API
    try {
      if (userStore.userPoints === 0) {
        const userId = userStore.userInfo?.userId;
        if (userId) {
          const pointsResponse: any = await getUserPoints(userId);
          if (pointsResponse && pointsResponse.code === 200 && pointsResponse.data) {
            userStore.setUserPoints(pointsResponse.data.availablePoints || 0);
            console.log('从API获取到的用户积分:', userStore.userPoints);
          }
        }
      } else {
        console.log('从userStore获取到的用户积分:', userStore.userPoints);
      }
    } catch (error) {
      console.error('获取用户积分失败:', error);
    }
  } catch (error) {
    console.error('获取签到信息失败:', error);
  }
};

const handleCheckin = async () => {
  if (!isLoggedIn.value || checkedInToday.value) return;
  
  try {
    const res: any = await userCheckin();
    if (res && (res.code === 200 || res.code === 1)) {
      // 显示获得的积分
      const pointsEarned = res.data?.pointsEarned || 0;
      ElMessage.success(`签到成功！获得${pointsEarned}积分`);
      checkedInToday.value = true;
      localStorage.setItem('checkedInToday', 'true');
      localStorage.setItem('lastCheckinDate', new Date().toISOString().split('T')[0]);
      
      // 确保连续签到天数正确更新
      if (res.data && res.data.consecutiveDays !== undefined && res.data.consecutiveDays !== null) {
        studyDays.value = res.data.consecutiveDays;
        console.log('签到后连续天数更新为:', studyDays.value);
      } else {
        // 如果API没有返回连续签到天数，则自增
        studyDays.value = studyDays.value + 1;
        console.log('签到后连续天数增加为:', studyDays.value);
      }
      
      // 更新用户积分
      userStore.setUserPoints(userStore.userPoints + pointsEarned);
      
      // 重新获取用户学习数据，确保数据更新
      await fetchUserStudyData();
      // 更新签到和积分信息
      await fetchUserCheckinInfo();
    } else {
      ElMessage.error(res?.message || '签到失败，请稍后重试');
    }
  } catch (error) {
    console.error('签到失败:', error);
    ElMessage.error('签到失败，请稍后重试');
  }
};

const logout = () => {
  // 清除所有登录相关数据
  localStorage.removeItem('loggedIn');
  localStorage.removeItem('token');
  localStorage.removeItem('user');
  localStorage.removeItem('userInfo');
  localStorage.removeItem('checkedInToday');
  userStore.clearUser();
  ElMessage.success('退出登录成功');
  // router.push('/');
  window.location.reload();
};

// 处理模态框切换
const handleSwitchToRegister = () => {
  showLoginModal.value = false;
  setTimeout(() => {
    showRegisterModal.value = true;
  }, 300);
};

const handleSwitchToLogin = () => {
  showRegisterModal.value = false;
  setTimeout(() => {
    showLoginModal.value = true;
  }, 300);
};

const handleSwitchToForgotPassword = () => {
  showLoginModal.value = false;
  setTimeout(() => {
    showForgotPasswordModal.value = true;
  }, 300);
};

const handleForgotPasswordToLogin = () => {
  showForgotPasswordModal.value = false;
  setTimeout(() => {
    showLoginModal.value = true;
  }, 300);
};

const handleForgotPasswordToRegister = () => {
  showForgotPasswordModal.value = false;
  setTimeout(() => {
    showRegisterModal.value = true;
  }, 300);
};

const handleUserAction = (command: string) => {
  switch (command) {
    case 'admin':
      goToAdmin();
      break;
    case 'login':
      showLoginModal.value = true;
      break;
    case 'logout':
      logout();
      break;
  }
};

// 移动端相关方法
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768;
};

// 处理积累内容菜单点击
const handleAccumulationClick = async (tab: string) => {
  // 跳转到根路径，确保显示积累内容
  router.push('/');
  activeAccumulationTab.value = tab;
  
  // 移动端自动收缩菜单
  if (isMobile.value && !isMenuCollapsed.value) {
    isMenuCollapsed.value = true;
  }
  
  // 根据不同的tab重新获取数据
  if (!isLoggedIn.value) {
    return;
  }
  
  try {
    switch (tab) {
      case 'common-sense':
        // 重新获取常识积累数据
        await fetchCommonSenseData();
        break;
      case 'politics':
        // 重新获取时政积累数据
        await fetchPoliticsData();
        break;
      case 'essay-material':
        // 重新获取作文素材数据
        await fetchEssayMaterialData();
        break;
      case 'vocabulary':
        // 重新获取词语积累数据（分页）
        await fetchVocabularyList(1);
        break;
      case 'note':
        // 重新获取笔记数据
        await fetchNotesData();
        break;
    }
  } catch (error) {
    console.error('切换积累标签失败:', error);
  }
};




const goToHome = () => {
  activeIndex.value = '/';
  router.push('/');
  
  // 移动端自动收缩菜单
  if (isMobile.value && !isMenuCollapsed.value) {
    isMenuCollapsed.value = true;
  }
};

const togglePracticeMenu = () => {
  showPracticeDrawer.value = true;
};

const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value;
  showUserDrawer.value = true;
};

const goToModule = (moduleName: string) => {
  showPracticeDrawer.value = false;
  activeIndex.value = moduleName;
  
  // 移动端自动收缩菜单
  if (isMobile.value && !isMenuCollapsed.value) {
    isMenuCollapsed.value = true;
  }
  
  // 根据不同的练习模块导航到对应的设置页面
  switch (moduleName) {
    case 'new-politics-practice':
      router.push('/practice-settings/politics');
      break;
    case 'new-common-sense-practice':
      router.push('/practice-settings/commonSense');
      break;
    case 'new-language-practice':
      router.push('/practice-settings/language');
      break;
    case 'new-quantity-practice':
      router.push('/practice-settings/quantitative');
      break;
    case 'new-judgment-practice':
      router.push('/practice-settings/judgment');
      break;
    case 'new-data-analysis-practice':
      router.push('/practice-settings/dataAnalysis');
      break;
    case 'new-vocabulary-accumulation-practice':
      router.push('/practice-settings/vocabulary-accumulation');
      break;
    case 'practice-settings-wrongQuestions':
      router.push('/practice-settings/wrongQuestions');
      break;
    // 添加试卷测验路由处理
    case 'paper-test':
      router.push('/paper-test/settings');
      break;
    // 添加AI聊天助手处理
    case 'ai-chat-assistant':
      router.push('/ai-assistant');
      break;
    default:
      router.push(`/${moduleName}`);
  }
};

// 页面挂载时检查移动端状态
onMounted(() => {
  checkMobile();
  window.addEventListener('resize', handleResize);
  
  // 原有的初始化逻辑
  fetchUserStudyData();
  fetchUserCheckinInfo();
});

// 组件卸载时移除事件监听
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize);
   
   // 清理定时器，防止内存泄漏
   if (saveHomeStateTimer) {
     clearTimeout(saveHomeStateTimer);
     saveHomeStateTimer = null;
   }
 });
</script>

<style scoped>
/* 页面加载效果 */
.page-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loading-icon {
  font-size: 48px;
  color: #409eff;
}

.loading-text {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.common-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: #ffffff;
  color: #333;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  height: 64px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* 提升字体渲染清晰度 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@keyframes shimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  gap: 20px;
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.5px;
  /* 提升文字清晰度 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.logo-icon {
  font-size: 24px;
  color: #007aff;
  /* 图标清晰度优化 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.menu-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.menu-toggle:hover {
  background: rgba(0, 122, 255, 0.1);
}

.menu-toggle .el-icon {
  font-size: 20px;
  color: #1a1a1a;
  /* 图标清晰度优化 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 搜索框样式 */
.header-search {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 1;
}

.header-search :deep(.el-autocomplete) {
  width: 100%;
}

.header-search :deep(.el-input__wrapper) {
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
}

.header-search :deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 12px rgba(0, 122, 255, 0.15);
}

.header-search :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 2px 12px rgba(0, 122, 255, 0.25);
}

/* 搜索按钮容器样式 */
.search-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  height: 100%;
}

/* 搜索按钮样式 */
.header-search :deep(.el-input-group__append) {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  padding: 0;
  margin-left: 8px;
  display: flex;
  align-items: center;
  height: 100%;
  box-shadow: none !important;
}

.header-search :deep(.el-input-group__append::before),
.header-search :deep(.el-input-group__append::after) {
  display: none !important;
  content: none !important;
}

.header-search :deep(.el-input-group__append .el-button) {
  background: #409eff;
  border: none;
  color: #fff;
  margin: 0;
  padding: 8px 20px;
  font-weight: 500;
  border-radius: 20px;
}

.header-search :deep(.el-input-group__append .el-button:hover) {
  background: #66b1ff;
}

/* 修改AI搜索按钮样式 */
.header-search :deep(.el-input-group__append .el-button.ai-search-btn) {
  background: #67c23a;
  border: none;
  color: #fff;
}

.header-search :deep(.el-input-group__append .el-button.ai-search-btn:hover) {
  background: #85ce61;
}

/* 搜索结果项样式 */
/* 搜索下拉框高度设置，确保能完整显示10条内容，不需要滚动 */
/* 使用更强的选择器优先级覆盖Element Plus默认样式 */
.search-autocomplete-popper.el-popper {
  max-height: 800px !important;
}

.search-autocomplete-popper .el-autocomplete-suggestion__wrap {
  max-height: 800px !important;
  overflow-y: auto !important;
}

.search-autocomplete-popper .el-autocomplete-suggestion__list {
  max-height: 800px !important;
}

.el-popper.search-autocomplete-popper .el-autocomplete-suggestion {
  max-height: 800px !important;
}

.el-popper.search-autocomplete-popper .el-autocomplete-suggestion .el-autocomplete-suggestion__wrap {
  max-height: 800px !important;
}

.header-search :deep(.el-autocomplete-suggestion) {
  max-height: 800px !important;
}

.header-search :deep(.el-autocomplete-suggestion__wrap) {
  max-height: 800px !important;
  overflow-y: auto !important;
}

.header-search :deep(.el-autocomplete-suggestion__list) {
  max-height: 800px !important;
}

/* 双列标题行样式 */
.search-header-row {
  display: flex;
  padding: 10px 12px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

/* 单列标题样式（只有热门搜索） */
.search-header-single {
  padding: 10px 12px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  font-size: 13px;
  color: #909399;
  font-weight: 600;
}

.search-header-left,
.search-header-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #909399;
  font-weight: 600;
}

.search-header-left {
  padding-right: 10px;
  border-right: 1px solid #e4e7ed;
}

.search-header-right {
  padding-left: 10px;
}

.search-header-left .el-button,
.search-header-right .el-button {
  padding: 2px 6px;
  font-size: 12px;
}

/* 内容行样式 */
.search-content-row {
  display: flex;
  padding: 0;
  cursor: pointer;
  min-height: 32px;
}

.search-column-left,
.search-column-right {
  flex: 1;
  padding: 6px 12px;
  transition: background 0.3s;
  min-width: 0;
}

.search-column-left {
  border-right: 1px solid #f0f0f0;
}

.search-column-left:hover,
.search-column-right:hover {
  background: #f5f7fa;
}

.search-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.search-item-text {
  flex: 1;
  font-size: 14px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 180px;
  line-height: 1.2;
}

.hot-icon {
  font-size: 16px;
  flex-shrink: 0;
  color: #ffa500;
}

/* 普通搜索结果项 */
.search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  min-width: 0;
}

/* 简洁模式（无图标，最小间距） */
.search-item-simple {
  padding: 4px 12px;
  gap: 0;
}

.search-item-simple .search-item-content {
  width: 100%;
}

.search-item-simple .search-item-title {
  font-size: 14px;
  color: #606266;
  font-weight: normal;
}

.search-item-icon {
  font-size: 18px;
  color: #409eff;
  flex-shrink: 0;
}

.search-item-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.search-item-title {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  /* 文字清晰度优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.search-item-type {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-links .el-menu-demo {
  border-bottom: none;
  background-color: transparent;
  position: relative;
  z-index: 1;
}

.nav-links .el-menu-item {
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  margin: 0 5px;
  transition: all 0.3s ease;
  color: white !important;
}

.nav-links .el-sub-menu__title span,
.nav-links .el-sub-menu__title .el-icon {
  color: white !important;
}

.nav-links .el-menu-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-links .el-menu-item.is-active {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  font-weight: 600;
}

.nav-links .el-sub-menu .el-sub-menu__title {
  border-radius: 8px;
  margin: 0 5px;
  transition: all 0.3s ease;
  color: white !important;
}

.nav-links .el-sub-menu .el-sub-menu__title:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px);
}

.home-menu-item {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)) !important;
}

.main-container {
  margin-top: 64px;
  height: calc(100vh - 64px);
  overflow: hidden;
}

.aside {
  background: #ffffff;
  border-right: none;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
  position: fixed;
  left: 0;
  top: 64px;
  bottom: 0;
  z-index: 999;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aside.collapsed {
  overflow-x: hidden;
  width: 0 !important;
  transform: translateX(0);
  box-shadow: none;
  border-right: none;
}

.aside.mobile-aside {
  position: fixed;
  height: calc(100% - 64px);
  top: 64px;
  left: 0;
  z-index: 999;
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.aside.mobile-aside.collapsed {
  transform: translateX(-100%);
}

.el-menu-vertical-demo {
  height: 100%;
  border-right: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 0;
}

/* 自定义菜单滚动条样式 */
.el-menu-vertical-demo::-webkit-scrollbar {
  width: 4px;
}

.el-menu-vertical-demo::-webkit-scrollbar-track {
  background: transparent;
}

.el-menu-vertical-demo::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 2px;
  transition: background 0.3s ease;
}

.el-menu-vertical-demo::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
}

.el-menu-vertical-demo.el-menu--collapse {
  width: 64px !important;
}

:deep(.el-menu-item) {
  margin: 4px 16px;
  padding: 0 16px !important;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  height: 46px;
  line-height: 46px;
  /* 文字清晰度优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:deep(.el-menu-item:hover) {
  background: rgba(0, 122, 255, 0.08);
  color: #007aff;
  transform: translateX(2px);
}

:deep(.el-menu-item.is-active) {
  background: linear-gradient(90deg, #007aff 0%, #0056b3 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}

:deep(.el-sub-menu .el-sub-menu__title) {
  margin: 4px 16px;
  padding: 0 12px 0 16px !important;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  height: 46px;
  line-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 文字清晰度优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:deep(.el-sub-menu__icon-arrow) {
  margin-left: 8px;
  margin-right: 0;
  font-size: 12px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
  flex-shrink: 0;
  color: #909399;
}

:deep(.el-sub-menu .el-sub-menu__title:hover) {
  background: rgba(0, 122, 255, 0.08);
  color: #007aff;
}

:deep(.el-sub-menu .el-menu-item) {
  margin: 3px 20px 3px 36px;
  padding: 0 16px !important;
  border-radius: 8px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  color: #666;
}

:deep(.el-menu-item .el-icon) {
  font-size: 18px;
  margin-right: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 图标清晰度优化 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

:deep(.el-menu-item.is-active .el-icon) {
  transform: scale(1.1);
}

:deep(.el-sub-menu__title .el-icon) {
  font-size: 18px;
  margin-right: 12px;
  flex-shrink: 0;
  /* 图标清晰度优化 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

:deep(.el-sub-menu__title span) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;
}

:deep(.el-sub-menu.is-opened > .el-sub-menu__title) {
  background: rgba(0, 122, 255, 0.05);
  color: #007aff;
}

:deep(.el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow) {
  color: #007aff;
  transform: rotate(180deg);
}

:deep(.el-sub-menu .el-menu-item.is-active) {
  background: rgba(0, 122, 255, 0.12);
  color: #007aff;
  font-weight: 600;
}

:deep(.el-sub-menu .el-menu) {
  background-color: transparent;
  padding: 6px 0;
}

:deep(.el-sub-menu) {
  margin-bottom: 4px;
}

:deep(.el-menu--collapse .el-menu-item) {
  padding: 0 !important;
  margin: 6px auto !important;
  border-radius: 8px;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

:deep(.el-menu--collapse .el-sub-menu__title) {
  padding: 0 !important;
  margin: 6px auto !important;
  border-radius: 8px;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

:deep(.el-menu--collapse .el-sub-menu__icon-arrow) {
  display: none !important;
}

:deep(.el-menu--collapse .el-menu-item .el-icon),
:deep(.el-menu--collapse .el-sub-menu__title .el-icon) {
  margin: 0 !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  position: relative;
  left: 0 !important;
  right: 0 !important;
}

:deep(.el-menu--collapse .el-menu-item span) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

:deep(.el-menu--collapse .el-sub-menu__title span) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

:deep(.el-menu--collapse .el-sub-menu .el-sub-menu__icon-arrow) {
  display: none !important;
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
  color: #333;
  background: transparent;
}

.menu-toggle:hover {
  background: rgba(0, 122, 255, 0.08);
  color: #007aff;
}

.menu-toggle .el-icon {
  font-size: 20px;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  z-index: 2;
}

.user-info > span {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.main-content {
  padding: 0;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  height: calc(100vh - 64px);
  overflow-y: auto;
  width: 100%;
}

/* 为路由视图提供完整背景支持 */
.main-content :deep(.practice-settings-page) {
  position: relative;
  width: 100%;
  min-height: 100%;
}

.welcome-section {
  padding: 0;
  background-color: transparent;
  max-width: 1200px;
  width: 100%;
}

.welcome-header {
  text-align: center;
  padding: 0;
  background-color: transparent;
  border-radius: 8px;
  margin-bottom: 30px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.7) 0%, rgba(118, 75, 162, 0.7) 100%);
  z-index: 1;
}

.hero-content {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  color: white;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.hero-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.hero-icon {
  font-size: 72px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.hero-content h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}

.hero-content p {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.hero-features {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
  position: relative;
  z-index: 1;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.feature-item .el-icon {
  font-size: 16px;
}

.study-stats {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 30px;
  border-radius: 16px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.study-stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
  pointer-events: none;
}

.stat-card {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 25px 20px;
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

.stat-icon {
  font-size: 36px;
  color: #409eff;
  margin-right: 20px;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  background-color: rgba(64, 158, 255, 0.05);
  border-radius: 8px;
  padding: 10px;
}

.stat-title {
  font-size: 16px;
  font-weight: bold;
  margin-left: 10px;
  flex: 1;
}

.calendar-container {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
}

.module-questions {
  margin-top: 8px;
  font-size: 12px;
  color: #606266;
}

.module-question-item {
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-description {
  margin-top: 8px;
  font-size: 12px;
  color: #409EFF;
  font-style: italic;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 14px;
  color: #5a6c7d;
  margin-top: 8px;
  font-weight: 500;
}

.checkin-button {
  margin-top: 10px;
  width: 80%;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #67c23a 0%, #4caf50 100%);
  border: none;
  border-radius: 0px;
  box-shadow: 0 2px 6px rgba(103, 194, 58, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 15px;
  margin-left: auto;
  margin-right: auto;
}

.checkin-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(103, 194, 58, 0.4);
}

.checked-button {
  background: linear-gradient(135deg, #67c23a 0%, #4caf50 100%);
  opacity: 0.8;
  cursor: default;
}

.checked-in-tag {
  margin-top: 10px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #f0f9eb 0%, #e1f3d8 100%);
  color: #67c23a;
  border-radius: 0px;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(103, 194, 58, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eaeaea;
  width: 100%;
}

.module-section {
  background-color: #fff;
  border-radius: 0px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  padding: 30px;
  margin-bottom: 30px;
  width: 100%;
}

.module-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.module-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0px;
  overflow: hidden;
  height: 100%;
  position: relative;
  border: 1px solid #e4e7ed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.module-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
  z-index: 1;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.module-card:hover .arrow-icon {
  transform: translateX(5px);
}

.card-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 20px;
  position: relative;
  z-index: 2;
}

.card-icon {
  font-size: 48px;
  margin-right: 20px;
  border-radius: 0px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
}

.card-icon.politics {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.card-icon.common-sense {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.card-icon.language {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.card-icon.quantity {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
}

.card-icon.judgment {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

.card-icon.data-analysis {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
  transform-style: preserve-3d;
}

.card-icon.data-analysis:hover {
  transform: translateY(-5px) rotateX(10deg);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

.card-info {
  flex: 1;
}

.card-header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.arrow-icon {
  font-size: 16px;
  color: #909399;
  transition: all 0.3s ease;
}

.card-info h3 {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.card-info p {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 15px 0;
}

.start-hint {
  margin-top: 10px;
}

.start-hint span {
  color: #409eff;
  font-size: 13px;
  font-weight: 500;
}

.progress-info {
  margin-top: 15px;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 1;
}

.user-avatar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0.4, 0.2, 1);
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
}

.user-avatar-container:hover {
  background: #e8f3ff;
  border-color: #007aff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
}

.user-avatar-container:not(.logged-in) {
  opacity: 0.8;
}

.dropdown-icon {
  transition: transform 0.3s ease;
  color: #909399;
  font-size: 14px;
}

.user-avatar-container:hover .dropdown-icon {
  transform: rotate(180deg);
}

.user-actions .el-dropdown-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-actions .el-dropdown-menu__item:hover {
  background-color: #f5f7fa;
}

.user-actions .el-dropdown-menu__item i {
  font-size: 16px;
}

.welcome-text {
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.welcome-text.unlogged {
  opacity: 0.7;
  font-style: italic;
}

/* 移动端底部导航栏样式 */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 0 10px;
}

.mobile-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 8px;
  min-width: 50px;
}

.mobile-bottom-nav .nav-item:hover,
.mobile-bottom-nav .nav-item.active {
  color: white;
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.mobile-bottom-nav .nav-item .el-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.mobile-bottom-nav .nav-item span {
  font-size: 10px;
  font-weight: 500;
}

/* 练习模块弹出菜单样式 */
.practice-drawer .practice-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 20px;
}

.practice-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 0px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.practice-menu-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.practice-menu-item .el-icon {
  font-size: 32px;
  margin-bottom: 8px;
  color: #667eea;
}

.practice-menu-item:hover .el-icon {
  color: white;
}

.practice-menu-item span {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

/* 用户菜单弹出样式 */
.user-drawer .user-menu-content {
  padding: 20px;
}

.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 0px;
  margin-bottom: 20px;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
  color: #333;
}

.user-points {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.user-menu-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-menu-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-menu-item:hover {
  background: #f8f9fa;
  transform: translateX(5px);
}

.user-menu-item.logout {
  color: #f56c6c;
}

.user-menu-item.logout:hover {
  background: #fef0f0;
}

.user-menu-item .el-icon {
  font-size: 18px;
  margin-right: 12px;
}

.user-menu-item span {
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .header {
    /* 在移动端显示顶部导航 */
    display: flex;
    height: 50px;
    padding: 0 10px;
  }
  
  .header-search {
    display: none; /* 在移动端隐藏搜索框 */
  }
  
  .logo {
    font-size: 18px;
    gap: 5px;
  }
  
  .logo-icon {
    font-size: 20px;
  }
  
  .nav-links {
    display: none; /* 在小屏幕上隐藏导航链接 */
  }
  
  .user-actions {
    display: none; /* 在移动端隐藏用户操作按钮 */
  }
  
  .main-content {
    padding-bottom: 80px; /* 为底部导航栏留出空间 */
    padding: 20px;
    margin-top: 50px; /* 调整为移动端头部高度 */
  }
  
  /* 移动端用户信息优化 */
  .user-actions {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 999;
    display: flex;
    align-items: center;
  }
  
  .user-avatar-container {
    padding: 3px 10px;
    border-radius: 20px;
  }
  
  .welcome-text {
    display: none; /* 在小屏幕上隐藏用户名 */
  }
  
  .user-avatar-container .el-avatar {
    --el-avatar-size: 30px;
  }
  
  .logout-button {
    padding: 3px 8px;
    font-size: 10px;
    border-radius: 0px;
    background: rgba(255, 255, 255, 0.2);
  }
  
  .hero-content {
    padding: 30px 15px;
  }
  
  .hero-content h1 {
    font-size: 24px;
  }
  
  .hero-features {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  
  .feature-item {
    width: 200px;
  }
  
  .study-stats {
    padding: 20px;
  }
  
  .study-stats .el-col {
    margin-bottom: 15px;
  }
  
  .stat-card {
    padding: 20px 15px;
  }
  
  .stat-value {
    font-size: 24px;
  }
  
  .module-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .module-card {
    height: auto;
    min-height: 150px;
  }
  
  .card-content {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }
  
  .card-icon {
    margin-right: 0;
    margin-bottom: 15px;
    width: 60px;
    height: 60px;
    font-size: 36px;
  }
  
  .card-header-info {
    flex-direction: column;
    gap: 10px;
  }
  
  .arrow-icon {
    display: none;
  }
  
  .recent-activity {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .header {
    height: 45px;
    padding: 0 8px;
  }
  
  .logo {
    font-size: 16px;
    gap: 4px;
  }
  
  .logo-icon {
    font-size: 18px;
  }
  
  .hero-content h1 {
    font-size: 20px;
  }
  
  .hero-icon {
    font-size: 48px;
  }
  
  .study-stats .el-row {
    flex-direction: column;
  }
  
  .stat-value {
    font-size: 20px;
  }
  
  .card-icon {
    width: 50px;
    height: 50px;
    font-size: 28px;
  }
  
  /* 小屏幕设备进一步优化 */
  .user-actions {
    top: 10px;
    right: 10px;
    display: none; /* 在小屏幕上隐藏用户操作按钮 */
  }
  
  .user-avatar-container {
    padding: 2px 8px;
  }
  
  .user-avatar-container .el-avatar {
    --el-avatar-size: 28px;
  }
  
  .logout-button {
    padding: 2px 6px;
    font-size: 9px;
    border-radius: 10px;
  }
  
  .main-content {
    margin-top: 45px; /* 调整为小屏幕头部高度 */
  }
}

/* 签到卡片样式 */
.checkin-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: none;
  overflow: hidden;
}

.checkin-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #67c23a, #4caf50);
}

.checkin-icon {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
  border-radius: 50%;
  padding: 10px;
}

.checkin-stats-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 10px;
}

.checkin-stat-item {
  text-align: center;
  padding: 10px 15px;
  background: rgba(64, 158, 255, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease;
  flex: 1;
  margin: 0 5px;
  cursor: pointer;
}

.checkin-stat-item:hover {
  background: rgba(64, 158, 255, 0.1);
  transform: translateY(-2px);
}

.achievement-entry {
  color: #67c23a;
}

.achievement-entry .checkin-stat-value {
  color: #67c23a;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkin-stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}

.checkin-stat-label {
  font-size: 14px;
  color: #606266;
}

.view-details-btn {
  margin-top: 10px;
  color: #409EFF;
  font-weight: 500;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* 积累模块样式优化 */

/* AI聊天助手容器样式 */
.ai-assistant-container {
  width: 100%;
  height: 100%;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.accumulation-section {
  padding: 0;
  width: 100%;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 登录提示样式 */
.login-prompt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 64px);
  padding: 0;
  background: #f5f7fa;
}

.prompt-card {
  background: white;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.empty-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 40px;
  background: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.25);
}

.empty-icon .el-icon {
  font-size: 60px;
  color: white;
}

.empty-description h3 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.empty-description p {
  font-size: 18px;
  color: #666;
  margin-bottom: 40px;
}

.prompt-card .el-button {
  padding: 16px 50px;
  font-size: 18px;
  border-radius: 8px;
  background: #409eff;
  border: none;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.prompt-card .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  background: #3a8ee6;
}

.prompt-card .el-button .el-icon {
  margin-right: 10px;
}

.accumulation-container {
  display: flex;
  flex: 1;
  min-height: 0;
}

.accumulation-content {
  flex: 1;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}



/* 我的笔记单栏布局 */
.accumulation-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}



/* 我的笔记单栏布局 */
.accumulation-list.single-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.accumulation-list.single-column .accumulation-item {
  margin: 0;
}

.accumulation-item {
  transition: all 0.3s ease;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.accumulation-item:hover {
  transform: none;
  box-shadow: none;
  border-bottom-color: #409eff;
}

.item-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 0;
  background: transparent;
  border-radius: 0;
  margin: 0 0 16px 0;
  border-bottom: 2px solid #e4e7ed;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.header-icon {
  font-size: 18px;
  color: #409eff;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.item-header .el-tag {
  background: white;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.item-content {
  padding: 12px 0;
  line-height: 1.7;
  flex: 1;
  overflow: hidden;
}

.item-content .w-e-text-container {
  min-height: 200px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 0;
  background: transparent;
  border-radius: 0;
  border: none;
}

/* 自定义编辑器内容区域滚动条 */
.item-content .w-e-text-container::-webkit-scrollbar {
  width: 6px;
}

.item-content .w-e-text-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.item-content .w-e-text-container::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.item-content .w-e-text-container::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

.item-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #909399;
  margin-top: auto;
  padding: 12px 0;
  background: transparent;
  border-radius: 0;
  margin: 16px 0 0 0;
  border-top: 1px solid #e4e7ed;
}

.footer-icon {
  font-size: 16px;
  color: #909399;
}

.time {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
}

/* 词语积累搜索表单样式 */
.vocabulary-search-form {
  margin-bottom: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: none;
  border: 1px solid #e4e7ed;
}

.vocabulary-search-form .el-form-item {
  margin-bottom: 0;
}

.search-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-wrapper .el-input {
  flex: 0 0 auto;
}

.search-wrapper .el-button {
  flex-shrink: 0;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 25px 0 15px;
}

.pagination-container .el-pagination {
  --el-pagination-bg-color: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

@media (max-width: 1200px) {
  .accumulation-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .item-title {
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  .accumulation-container {
    gap: 15px;
  }
  
  .accumulation-content {
    padding: 20px;
  }
  
  .accumulation-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding: 15px 0;
  }
  
  .accumulation-item {
    padding: 20px;
  }
  
  .item-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  
  .item-content {
    padding: 10px 0;
  }
  
  .item-content .w-e-text-container {
    min-height: 180px;
  }
  
  .item-footer {
    padding-top: 12px;
  }
}

@media (max-width: 768px) {
  .accumulation-section {
    padding: 15px 10px;
  }
  
  .accumulation-container {
    flex-direction: column;
    height: auto;
  }
  
  .accumulation-list {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px 0;
  }
  
  /* 在移动端，我的笔记也保持单栏布局 */
  .accumulation-list.single-column {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .accumulation-item {
    padding: 18px;
  }
  
  .item-title {
    font-size: 16px;
  }
  
  .item-content .w-e-text-container {
    min-height: 150px;
  }
  
  .vocabulary-search-form {
    padding: 15px;
    margin-bottom: 20px;
  }
  
  .pagination-container {
    padding: 20px 0 10px;
  }
}

@media (max-width: 480px) {
  .accumulation-section {
    padding: 10px 5px;
  }
  
  .accumulation-list {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 10px 0;
  }
  
  /* 在小屏幕设备上，我的笔记保持单栏布局 */
  .accumulation-list.single-column {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .accumulation-item {
    padding: 15px;
  }
  
  .item-title {
    font-size: 15px;
  }
  
  .item-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  
  .item-content {
    padding: 8px 0;
  }
  
  .item-content .w-e-text-container {
    min-height: 120px;
  }
  
  .item-footer {
    font-size: 12px;
    padding-top: 10px;
  }
  
  .time {
    font-size: 12px;
  }
  
  .vocabulary-search-form {
    padding: 12px;
  }
  
  .vocabulary-search-form .el-input {
    width: 100% !important;
  }
  
  .vocabulary-search-form .el-button {
    margin-top: 10px;
    width: 100%;
  }
}

/* 掘金风格的侧边栏和内容区域样式 */
.content-wrapper {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  min-height: calc(100vh - 60px);
}

/* 左侧边栏样式 */
.juejin-sidebar {
  background-color: #ffffff;
  border-radius: 8px;
  margin-right: 20px;
  height: fit-content;
  position: sticky;
  top: 80px;
}

.juejin-sidebar .el-menu {
  border-right: none;
}

.juejin-sidebar .el-menu-item {
  height: 40px;
  line-height: 40px;
}

.juejin-sidebar .el-menu-item.is-active {
  background-color: #e6f7ff;
  color: #1e80ff;
}

/* 主内容区域样式 */
.juejin-main-content {
  flex: 1;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
}

/* 内容标签页样式 */
.content-tabs {
  margin-bottom: 20px;
}

.tab-nav {
  display: flex;
  border-bottom: 1px solid #ebeef5;
}

.tab-item {
  padding: 0 16px 12px;
  margin-right: 20px;
  cursor: pointer;
  color: #606266;
  font-size: 14px;
  position: relative;
}

.tab-item.active {
  color: #1e80ff;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1e80ff;
}

/* 文章列表样式 */
.article-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-item {
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.article-item:last-child {
  border-bottom: none;
}

.article-header {
  margin-bottom: 12px;
}

.article-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.5;
}

.article-title a {
  color: #303133;
  text-decoration: none;
  transition: color 0.3s;
}

.article-title a:hover {
  color: #1e80ff;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #909399;
}

.article-meta .author {
  color: #606266;
  font-weight: 500;
}

.article-meta .tags {
  color: #1e80ff;
  background-color: #e6f7ff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.article-content {
  color: #606266;
  line-height: 1.7;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-footer {
  display: flex;
  justify-content: flex-end;
}

.article-image {
  width: 200px;
  height: 100px;
  border-radius: 4px;
  object-fit: cover;
}

/* 右侧边栏样式 */
.juejin-right-sidebar {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  height: fit-content;
  position: sticky;
  top: 80px;
}

/* 用户卡片样式 */
.user-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.user-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.user-card-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.sign-in-btn {
  background-color: #1e80ff;
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sign-in-btn:hover {
  background-color: #409eff;
}

.user-stats {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

/* 文章榜样式 */
.trending-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.trending-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 12px;
}

.trending-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trending-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.trending-item .rank {
  width: 20px;
  height: 20px;
  background-color: #f0f2f5;
  color: #606266;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.trending-item:nth-child(1) .rank,
.trending-item:nth-child(2) .rank,
.trending-item:nth-child(3) .rank {
  background-color: #ff7875;
  color: white;
}

.trending-text {
  flex: 1;
  font-size: 14px;
  color: #303133;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5;
}

.trending-text:hover {
  color: #1e80ff;
}

.more-link {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: #909399;
  text-decoration: none;
}

.more-link:hover {
  color: #1e80ff;
}

.main-content {
  padding: 0;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  height: calc(100vh - 64px);
  overflow-y: auto;
  width: 100%;
}

/* 首页布局容器样式 */
.main-content:has(.home-layout) {
  align-items: stretch;
  padding: 0;
}

/* 为路由视图提供完整背景支持 */
.main-content :deep(.practice-settings-page) {
  position: relative;
  width: 100%;
  min-height: 100%;
}

/* 首页布局样式 */
.home-layout {
  display: flex;
  gap: 0;
  padding: 0;
  min-height: calc(100vh - 64px);
  height: calc(100vh - 64px);
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

.home-left-panel {
  flex: 0 0 220px; /* 固定宽度 */
  width: 220px; /* 明确指定宽度 */
  min-width: 220px;
  max-width: 220px;
  overflow: hidden; /* 防止内容溢出 */
  border-right: 1px solid #e4e7ed;
  height: 100%;
}

.home-center-panel {
  flex: 1; /* 自适应宽度 */
  min-width: 0; /* 允许内容收缩 */
  height: 100%;
}

.home-right-panel {
  flex: 0 0 240px; /* 固定宽度 */
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid #e4e7ed;
  height: 100%;
}

.home-right-panel .panel-card {
  flex: 1;
  overflow: visible;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 词语积累列表样式 */
.vocabulary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e7ed;
}

.vocabulary-header h3 {
  margin: 0;
}

.vocabulary-count {
  font-size: 13px;
  color: #909399;
  background: #f5f7fa;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.vocabulary-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.vocabulary-item {
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vocabulary-item:hover {
  background-color: #f5f7fa;
  padding-left: 18px;
}

.vocabulary-item.active {
  background-color: #ecf5ff;
  border-left: 3px solid #409eff;
}

.vocabulary-item:last-child {
  border-bottom: none;
}

.vocabulary-word {
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
  font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
}

.vocabulary-pos {
  font-size: 12px;
  color: #909399;
  background: #f0f2f5;
  padding: 3px 10px;
  border-radius: 12px;
  flex-shrink: 0;
  font-weight: 400;
  min-width: 36px;
  text-align: center;
}

/* 词语列表滚动条样式 */
.vocabulary-list::-webkit-scrollbar {
  width: 6px;
}

.vocabulary-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.vocabulary-list::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.vocabulary-list::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 首页常识积累列表样式 */
.simple-accumulation-list {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.simple-item {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.simple-item:hover {
  background-color: #f5f7fa;
}

.simple-item:last-child {
  border-bottom: none;
}

.accumulation-category {
  margin-bottom: 20px;
}

.accumulation-category h4 {
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

.item-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: '仿宋', FangSong, STFangsong, serif;
}

.item-content-preview {
  font-size: 16px;
  color: #34495e;
  margin-bottom: 8px;
  line-height: 1.8;
  font-family: '仿宋', FangSong, STFangsong, serif;
}

.item-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.time-icon {
  font-size: 12px;
}

.load-more {
  padding: 12px 15px;
  text-align: center;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}

.load-more:hover {
  color: #66b1ff;
}

.load-more-container {
  text-align: center;
  padding: 20px 0;
}

.load-more-container .el-button {
  padding: 12px 24px;
}

.panel-card {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  padding: 20px;
  display: flex;
  flex-direction: column;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden; /* 防止内容溢出 */
  width: 100%; /* 限制在父容器内 */
}

.panel-card h3 {
  margin-bottom: 10px;
  color: #333;
  font-size: 18px;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
}

.panel-card p {
  color: #666;
  font-size: 14px;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
}

.home-center-card {
  align-items: stretch;
}

.center-panel {
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* 首页积累菜单样式 */
.panel-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-accumulation-menu {
  margin-top: 15px;
  overflow: hidden; /* 防止内容溢出 */
}

.accumulation-menu-category {
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  overflow: hidden; /* 防止内容溢出 */
}

.accumulation-menu-category:last-child {
  border-bottom: none;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
  overflow: hidden; /* 防止内容溢出 */
}

.category-header:hover {
  background-color: #f5f7fa;
}

.category-header span {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  overflow: hidden; /* 防止文字溢出 */
  text-overflow: ellipsis; /* 文字过长时显示省略号 */
  white-space: nowrap; /* 不换行 */
}

.expand-icon {
  transition: transform 0.3s;
}

.expand-icon.expanded {
  transform: rotate(90deg);
}

.category-items {
  padding-left: 12px;
  overflow: hidden; /* 防止内容溢出 */
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
  margin-bottom: 4px;
  overflow: hidden; /* 防止内容溢出 */
}

.menu-item:hover {
  background-color: #ecf5ff;
}

.menu-item.active {
  background-color: #409eff;
  color: #fff;
}

.menu-item.active .item-name {
  color: #fff;
}

.item-name {
  flex: 1;
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-hint {
  padding: 20px;
  text-align: center;
  color: #909399;
  font-size: 13px;
}

/* 中间区域列表样式 */
.selected-category-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.category-list-header {
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  margin-bottom: 15px;
}

.category-list-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  font-family: '仿宋', FangSong, STFangsong, serif;
}

.accumulation-items-list {
  flex: 1;
  overflow-y: auto;
}

.list-item {
  padding: 15px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.list-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.list-item.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.list-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.list-item-header .item-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  font-family: '仿宋', FangSong, STFangsong, serif;
  flex: 1;
  margin-right: 15px;
}

.list-item-header .item-time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  font-size: 13px;
  white-space: nowrap;
}

.list-item .item-content-preview {
  font-size: 15px;
  color: #606266;
  line-height: 1.6;
  font-family: '仿宋', FangSong, STFangsong, serif;
}

/* 笔记列表项样式 */
.note-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.note-list-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
  transform: translateX(5px);
}

.note-item-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.note-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #2c3e50;
  font-family: '仿宋', FangSong, STFangsong, serif;
}

.note-icon {
  font-size: 18px;
  color: #409eff;
}

.note-time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  font-size: 13px;
  white-space: nowrap;
}

.arrow-icon {
  font-size: 18px;
  color: #c0c4cc;
  transition: all 0.3s;
}

.note-list-item:hover .arrow-icon {
  color: #409eff;
  transform: translateX(3px);
}

/* 点击左侧菜单项时的高亮效果 */
.note-list-item.item-highlight {
  border-color: #409eff;
  border-width: 2px;
  background-color: #ecf5ff;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.25);
}

.note-list-item.item-highlight .arrow-icon {
  color: #409eff;
}

.empty-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.empty-detail .empty-icon {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

.empty-detail p {
  font-size: 15px;
  color: #909399;
}

/* 词语详情样式 */
.vocabulary-detail {
  padding: 30px;
  animation: fadeIn 0.3s ease-in-out;
  overflow-y: auto;
  height: 100%;
}

/* 词语详情滚动条样式 */
.vocabulary-detail::-webkit-scrollbar {
  width: 6px;
}

.vocabulary-detail::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.vocabulary-detail::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.vocabulary-detail::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vocabulary-detail-header {
  display: flex;
  align-items: baseline;
  gap: 15px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e4e7ed;
}

.vocabulary-detail-word {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
}

.vocabulary-detail-pos {
  font-size: 14px;
}

.vocabulary-detail-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.vocabulary-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #606266;
  margin: 0 0 12px 0;
}

.vocabulary-section h4 .el-icon {
  color: #409eff;
  font-size: 18px;
}

.definition-text,
.example-text,
.related-text {
  margin: 0;
  padding: 15px 20px;
  background: #f5f7fa;
  border-radius: 8px;
  line-height: 1.8;
  font-size: 15px;
  color: #303133;
}

.definition-text {
  font-size: 16px;
  font-weight: 500;
}

.example-text {
  font-style: italic;
  border-left: 3px solid #67c23a;
}

.related-text {
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .home-layout {
    flex-direction: column;
  }
  
  .home-left-panel,
  .home-right-panel {
    flex: auto;
    width: 100%;
    max-width: 100%; /* 移动端也限制最大宽度 */
    overflow: hidden; /* 防止内容溢出 */
  }
}

@media (max-width: 768px) {
  .home-layout {
    padding: 15px;
    gap: 15px;
  }
  
  .panel-card {
    padding: 15px;
    min-height: 150px;
  }
  
  .panel-card h3 {
    font-size: 16px;
  }
  
  .panel-card p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .home-layout {
    padding: 10px;
    gap: 10px;
  }
  
  .panel-card {
    padding: 12px;
  }
}

/* 掘金风格响应式设计 */
@media (max-width: 1200px) {
  .content-wrapper {
    max-width: 100%;
    padding: 15px;
  }
    
  .juejin-sidebar {
      margin-right: 15px;
    }
    
    .juejin-right-sidebar {
      width: 240px;
    }
  }
  
  @media (max-width: 992px) {
    .juejin-right-sidebar {
      display: none;
    }
    
    .juejin-main-content {
      padding: 15px;
    }
  }
  
  @media (max-width: 768px) {
    .juejin-header-content {
      padding: 0 12px;
    }
    
    .nav-links {
      display: none;
    }
    
    .juejin-search {
      margin: 0 20px;
      max-width: 100%;
    }
    
    .content-wrapper {
      flex-direction: column;
      padding: 10px;
    }
    
    .juejin-sidebar {
      display: none;
    }
    
    .juejin-main-content {
      padding: 15px;
    }
    
    .article-title {
      font-size: 16px;
    }
    
    .article-meta {
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .article-footer {
      justify-content: center;
    }
    
    .article-image {
      width: 100%;
      height: auto;
      max-height: 150px;
    }
  }
  
  @media (max-width: 480px) {
    .juejin-header {
      height: 50px;
    }
    
    .main-container {
      margin-top: 50px;
    }
    
    .juejin-header-content {
      padding: 0 8px;
    }
    
    .juejin-search {
      margin: 0 10px;
    }
    
    .juejin-main-content {
      padding: 12px;
    }
    
    .tab-item {
      padding: 0 12px 8px;
      margin-right: 15px;
      font-size: 13px;
    }
    
    .article-item {
      padding: 15px 0;
    }
    
    .article-title {
      font-size: 15px;
    }
    
    .article-content {
      font-size: 14px;
    }
  }
  
  /* 移动端菜单按钮 */
  .mobile-menu-btn {
    display: none;
    color: #303133;
    font-size: 20px;
    cursor: pointer;
  }
  
  @media (max-width: 768px) {
    .mobile-menu-btn {
      display: block;
    }
  }

/* 创建内容按钮样式 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  margin-right: 16px;
}

.header-actions :deep(.el-button) {
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: 500;
}

/* 创建类型选择框样式 */
.create-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 20px;
}

.create-type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: #f5f7fa;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.create-type-item:hover {
  background: #ecf5ff;
  border-color: #409EFF;
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.create-type-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-top: 12px;
  margin-bottom: 4px;
}

.create-type-desc {
  font-size: 13px;
  color: #909399;
  text-align: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .header-actions {
    margin-left: 12px;
    margin-right: 8px;
  }
  
  .header-actions :deep(.el-button) {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .header-actions :deep(.el-button span) {
    display: none;
  }
  
  .create-type-grid {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}
</style>

<!-- 全局样式，用于覆盖Element Plus autocomplete下拉框高度 -->
<style>
.search-autocomplete-popper .el-scrollbar__wrap {
  max-height: 800px !important;
}

.search-autocomplete-popper .el-autocomplete-suggestion {
  max-height: 800px !important;
}

.search-autocomplete-popper .el-autocomplete-suggestion__wrap {
  max-height: 800px !important;
}

.search-autocomplete-popper .el-autocomplete-suggestion__list {
  max-height: 800px !important;
}
</style>


